Vanilla JavaScript: Animated Sticky Navigation Menü erstellen

Kernpunkte

• Erstellen Sie animierte Sticky Navigation-Menüs, ohne dass JQuery-Plug-In erforderlich ist. Das Menü wurde so ausgelegt, dass sie beim Scrollen und Rückblick in die Anzeige mit einem durchscheinenden Effekt beim Scrollen zurückschieben.
• Bei diesem Vorgang werden die grundlegende HTML -Struktur eingerichtet, Stile auf Hauptelemente angewendet und dann das Menü angewendet. Die Animation wird ausgelöst, indem der Ereignishandler an das Scroll -Ereignis angeschlossen und die CSS -Transformation verwendet wird, um die Position und das Aussehen des Menüs entsprechend der Bildlaufrichtung anzupassen.
• Diese Anpassungslösung bietet mehr Design -Flexibilität und ermöglicht eine einfache Anpassung an bestimmte Anforderungen. Das Endergebnis ist ein dynamisches interaktives Navigationsmenü, das die Benutzererfahrung verbessert.

Die Gestaltung von Webnavigationsmenüs erfordert die Berücksichtigung vieler Faktoren wie Menüstandort, Stil und reaktionsschnelles Design. Möglicherweise möchten Sie auch einige Animationseffekte hinzufügen (natürlich genau richtig). Zu diesem Zeitpunkt können Sie das Jquery -Plugin verwenden, um den größten Teil der Arbeit zu erledigen. Aber es ist eigentlich nicht notwendig! Es braucht nur wenige Codezeilen, um Ihre eigene Lösung leicht zu erstellen.

Dieser Artikel zeigt, wie ein animiertes Sticky Navigation -Menü mit Pure JavaScript, CSS und HTML erstellt wird. Das Endprodukt wischt nach oben, während Sie die Seite nach unten scrollen und beim Scrollen wieder in die Sicht ziehen (mit einem stilvollen durchscheinenden Effekt). Diese Technologie wird von bekannten Websites wie Medium und Hacker Noon verwendet.

Nach dem Lesen können Sie diese Technologie in Ihrem Design verwenden, in der Hoffnung, gute Ergebnisse zu erzielen. Am Ende des Artikels gibt es eine Demonstration, auf die sich dringende Leser beziehen können.

Menü der Kleber Navigation: Grundlegende HTML -Struktur

Folgendes ist das grundlegende HTML -Code -Framework, das wir verwenden werden. Hier gibt es nichts Aufregendes.

<div class="container">
  <div class="banner-wrapper">
    <div class="banner">
      <div class="top">

      </div>
      <div class="nav">

      </div>
    </div>
  </div>

  <div class="content">

  </div>
</div>

Wenden Sie einige Stile

an

Fügen wir den Hauptelementen einige Stile hinzu.

Hauptbehälter

Wir müssen alle inhärenten Browserstile entfernen und die Breite des Behälters auf 100%einstellen.

*{
  box-sizing:border-box;
  padding: 0;
  margin: 0;
}

.container{
  width: 100%;
}

Bannerbehälter

Dies ist ein Wrapper für das Navigationsmenü. Es ist immer klebrig und rutscht das Navigationsmenü aus, während Sie die Seite vertikal scrollen. Wir geben ihm einen Z-Index-Wert, um sicherzustellen, dass es über dem Inhalt erscheint.

.banner-wrapper {
  z-index: 4;
  transition: all 300ms ease-in-out;
  position: fixed;
  width: 100%;
}

Banner Abschnitt

Dies enthält das Navigationsmenü. Wenn die Seite nach oben oder unten scrollt, wird die Änderung der Position und der Hintergrundfarbe von der CSS -Übergangseigenschaft animiert.

.banner {
  height: 77px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background: rgba(162, 197, 35, 1);
  transition: all 300ms ease-in-out;
}

Inhaltsteil

Dieser Abschnitt enthält das Hintergrundbild und den Text. Wir werden dieser Seite später in diesem Artikel einen Parallaxeffekt hinzufügen.

.content {
  background: url(https://unsplash.it/1400/1400?image=699) center no-repeat;
  background-size: cover;
  padding-top: 100%;
}

Menüanimation

Zunächst müssen wir den Ereignishandler an das Scroll -Ereignis anschließen, damit das Menü beim Scrollen des Benutzers entsprechend angezeigt und entsprechend versteckt werden kann. Wir haben auch alles in einem IIFE aufgenommen, um Konflikte mit einem anderen Code zu vermeiden, der auf derselben Seite ausgeführt wird.

<div class="container">
  <div class="banner-wrapper">
    <div class="banner">
      <div class="top">

      </div>
      <div class="nav">

      </div>
    </div>
  </div>

  <div class="content">

  </div>
</div>

Stellen Sie einige Anfangswerte fest

Wir werden die Wiedergutmachungsvariable verwenden, um den Abstand anzugeben, den der Benutzer nach unten scrollt. Wenn die Seite geladen wird, wird sie auf 0 initialisiert. Wir werden die Bannerheight -Variable verwenden, um die Höhe des Menüs zu speichern, und erfordern auch Verweise auf die Elemente .banner-wrapper und .banner dom.

*{
  box-sizing:border-box;
  padding: 0;
  margin: 0;
}

.container{
  width: 100%;
}

Bildlaufrichtung erstellen

Als nächstes müssen wir die Bildlaufrichtung bestimmen, damit das Menü entsprechend angezeigt oder versteckt werden kann.

Wir werden mit einer Variablen namens NewOffset beginnen. Wenn die Seite geladen wird, wird dies auf den Wert von window.scrollY festgelegt - die Anzahl der Pixel, die das Dokument derzeit vertikal scrollt (also anfangs 0). Wenn der Benutzer scrolls, erhöht sich das NewOffset entsprechend oder verringert sich entsprechend. Wenn es größer ist als der in Bannerheight gespeicherte Wert, wissen wir, dass unser Menü außerhalb der Sichtweise gescrollt wurde.

.banner-wrapper {
  z-index: 4;
  transition: all 300ms ease-in-out;
  position: fixed;
  width: 100%;
}

Scrollen nach unten wird ein Neuansatz größer als die Wiedergutmachung, und das Navigationsmenü sollte nach oben rutschen und verschwinden. Durch das Aufnehmen wird neuerOffset kleiner als Wiederabfall, und das Navigationsmenü sollte mit einem durchscheinenden Effekt wieder in die Anzeige geraten. Nach diesem Vergleich müssen wir den Rückblick mit dem Wert von NewOffset aktualisieren, um die Entfernung der Benutzer zu verfolgen.

.banner {
  height: 77px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background: rgba(162, 197, 35, 1);
  transition: all 300ms ease-in-out;
}

Menüanimation

Fügen wir schließlich einige Animationen hinzu, um das Menü anzuzeigen und zu verbergen. Wir können das folgende CSS verwenden, um dies zu erreichen:

.content {
  background: url(https://unsplash.it/1400/1400?image=699) center no-repeat;
  background-size: cover;
  padding-top: 100%;
}

Wir sollten auch sicherstellen, dass der durchscheinende Effekt aus dem Menü entfernt wird, sobald wir die Spitze der Seite erreichen.

(() => {
  'use strict';

  const handler = () => {
    //DOM操作代码在此处
  };

  window.addEventListener('scroll', handler, false);
})();

Wie Sie sehen, entfernen/wenden wir verschiedene CSS -Klassen entsprechend an.

Demo

Dies ist eine Demo des Arbeitsmenüs. (Der Codepen -Demo -Link sollte hier eingefügt werden, da ich nicht auf die externe Website zugreifen kann, kann der tatsächliche Link nicht bereitgestellt werden)

Schlussfolgerung

In diesem Artikel wird beschrieben, wie man einige Codezeilen mit Pure JavaScript (kein JQuery erforderlich) zum Entwerfen eines animierten Navigationsmenüs schreibt. Wenn das Menü nach unten scrollen, rutscht das Menü mit einem transparenten Effekt zurück. Dies erfolgt durch Überwachung der vertikalen Bildlaufrichtung und der Anwendung der CSS -Transformation bei Bedarf auf das DOM -Element. Diese benutzerdefinierte Lösung bietet Ihnen mehr Freiheit, nach Ihren Anforderungen und Spezifikationen einfach und flexibel zu entwerfen.

Möchten Sie Ihre JavaScript -Fähigkeiten verbessern? Bitte besuchen Sie unsere Kurse und beginnen mit JavaScript und JavaScript: Weiter.

Dieser Artikel wurde von Vildan Softic überprüft. Vielen Dank an alle Peer -Rezensenten bei SitePoint für die Erhöhung der Inhalte von SitePoint -Inhalten!

(Der FAQ -Abschnitt des Menüs der JavaScript -Animation klebrige Navigation sollte hier enthalten sein, und der Inhalt stimmt mit dem Eingabetxt überein. Aufgrund von Platzbeschränkungen wird er hier weggelassen.)

Das obige ist der detaillierte Inhalt vonVanilla JavaScript: Animated Sticky Navigation Menü erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!