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

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!