Erstellen einer intelligenten Navi mit Vanille JavaScript

Die Navigation klebrig oder fest ist eine beliebte Designauswahl, da sie den Benutzern anhaltenden Zugriff auf die Navigation auf der Website ermöglichen. Auf der anderen Seite nimmt es Platz auf der Seite ein und deckt manchmal Inhalte ein Weg, der weniger als ansprechend ist.

Eine mögliche Lösung? Smart Navigation.

Definieren wir "Smart Navigation" als:

1. Oben auf der Seite sichtbar
2. Sichtbar, wenn der Benutzer die Seite nach oben bewegt (wo immer er möglicherweise gescrollt ist)
3. Versteckt, wenn der Benutzer die Seite hinunterzieht

Hier ist ein Beispiel dafür, wie das funktionieren könnte:

Es ist die Bequemlichkeit der klebrigen Positionierung mit einem zusätzlichen Vollbild -Nutzen. Diese Art von intelligenter Navigation ist bereits häufig (denken Sie in vielen mobilen Browsern an die URL -Leiste), ist jedoch manchmal ein Ärger, um ohne Bibliothek oder Plugin zu implementieren. In diesem Artikel werden wir also diskutieren, wie man einen mit CSS und Vanille -JavaScript erstellt.

Randnotiz: Die Leute haben unterschiedliche Definitionen darüber, was das Scrollen auf einer Seite nach unten bedeutet (Stellen Sie sich vor, einige Trackpad -Einstellungen scrollen Sie die Seite nach oben, wenn Sie Ihre Finger nach unten bewegen). Für die Zwecke dieses Artikels bezieht sich das Scrollen nach unten auf den Ende der Seite.

Schauen wir uns den Code an

Hier ist ein Beispiel für HTML. Unsere intelligente Navigation wird die

sein, die über der steht:

 <nav>
  <div>
    Logo
  </div>
  <div>
    <a href="#"> link 1 </a>
    <a href="#"> link 2 </a>
    <a href="#"> link 3 </a>
    <a href="#"> link 4 </a>
  </div>
</nav>
<main>
  
</main>

Es ist wichtig zu beachten, dass Elemente nur im Verhältnis zu ihrem Elternbehälter klebrig sind. Der übergeordnete Container von

sollte das Körpermarke sein. Es sollte nicht in ein anderes Tag auf der Seite platziert werden.

Das CSS für unsere intelligente Navigation sieht folgt aus:

 nav {
  Position: klebrig;
  Top: 0;
  Anzeige: Flex;
  Flex-Wrap: Wrap;
  Rechtfertigungsbekämpfung: Weltraum zwischen;
  Polsterung: 1,5Rem 2Rem;
  Hintergrundfarbe: #eaeaa;
}

Jetzt müssen wir erkennen, wann unser Benutzer die Seite und die Richtung seines Scrollens scrollen. Ein Benutzer scrollt nach unten, wenn der Wert seiner letzten Bildlaufposition geringer ist als der Wert seiner aktuellen Scrollposition. Wenn wir die Logik unterbrechen, müssen wir:

1. Definieren Sie eine Variable, um die vorherige Scrollposition zu speichern
2. Weisen Sie eine Variable zu, um die aktuelle Scrollposition für den Scroll -Offset der Seite zu erkennen

Wenn die aktuelle Scrollposition größer ist als die vorherige Scrollposition, scrollt der Benutzer nach unten. Nennen wir unsere Funktion isscrollingdown:

 Lassen Sie Vorvorsendrollposition = 0;

const isscrollingdown = () => {
  Lassen Sie CurrentscrolledPosition = Fenster.Scrolly || Fenster.pageyOffset;
  Lassen Sie Scrollingdown;

  if (currentscrolledPosition> VoreingenommenerCrollposition) {
    scrollingdown = true;
  } anders {
    scrollingdown = false;
  }
  VoreingenommenerCrollPosition = CurrentsCrolledPosition;
  Return Scrollingdown;
};

Hier ist eine visuelle Darstellung, wie diese Funktion funktioniert:

Mit dieser Logik können wir erkennen, wann die Seite nach unten scrollt, damit wir dies verwenden können, um unser NAV -Styling zu umschalten:

 const nav = document.querySelector ('nav');

const handlenavscroll = () => {
  if (isscrollingdown ()) {
    nav.classlist.add ('scroll-down');
    nav.classlist.remove ('scrollen up')
  } anders {
    nav.classlist.add ('scroll-up');
    nav.classlist.remove ('scroll-down')
  }
}

Wenn der Benutzer nach unten scrollt, werden wir eine .Scroll-Down-Klasse zuweisen, die unsere Styling-Methode enthält, wenn sich die Seite nach unten bewegt. Wir können unser

CSS auf diese aktualisieren:

 nav {
  / * Standardstyling */
  Übergang: Top 500 ms.
}

nav.scroll-up {
  Top: 0;
}

nav.scroll-down {
  Oben: -100%;
}

Mit diesem Styling wird der Top -Eigenschaftswert von

auf -100% der Seitenhöhe eingestellt, sodass er aus der Sicht herausrutscht. Wir könnten uns auch dafür entscheiden, unser Styling mit übersetzer oder durch Verblassen zu bewältigen - was auch immer die Animation am besten funktioniert.

Leistung

Immer wenn wir mit Scroll -Event -Hörern zusammenarbeiten, sollte die Leistung sofort in den Sinn kommen. Im Moment rufen wir unsere Funktion jedes Mal auf, wenn der Benutzer die Seite scrollt, aber wir müssen nicht jede Pixelbewegung erkennen.

Für diesen Fall können wir stattdessen eine Gasfunktion implementieren. Eine Drosselklappenfunktion ist eine Funktion höherer Ordnung, die als Timer für die in sie übergebene Funktion fungiert. Wenn wir ein Scroll -Event mit einem Timer von 250 ms drosseln, wird das Ereignis nur alle 250 ms aufgerufen, während der Benutzer scrolls. Es ist eine großartige Möglichkeit, die Häufigkeit zu begrenzen, mit der wir die Funktion nennen, und hilft bei der Leistung der Seite.

David Corbacho befasst sich in diesem Artikel tiefer in die Implementierung von Drosselklappen.

Eine einfache Drosselklappenimplementierung in JavaScript sieht so aus:

 // Initialisieren Sie eine Variable der Drosselklappenwait
var throttlewait;

const throttle = (callback, Zeit) => {
  // Wenn die Variable wahr ist, führen Sie die Funktion nicht aus
  if (throttlewait) zurück;

  // Stellen Sie die Wartevariable auf True ein, um die Funktion zu pausieren
  throttlewait = wahr;

  // SetTimeout verwenden, um die Funktion innerhalb der angegebenen Zeit auszuführen
  setTimeout (() => {
    callback ();

    // Throttlewait auf false setzen, sobald der Timer die Gasfunktion neu starten kann
    throttlewait = false;
  }, Zeit);
}

Dann können wir unsere Handlenavscroll -Funktion in einen Gas aufnehmen:

 window.addeventListener ("scrollen", () => {
  Gas (Handlenavscroll, 250)
});

Mit dieser Implementierung wird die Handlenavscroll -Funktion nur einmal alle 250 ms aufgerufen.

Zugänglichkeit

Bei der Implementierung einer benutzerdefinierten Funktion in JavaScript müssen wir immer die Barrierefreiheit in Anspruch nehmen. Ein solches Problem ist die Sicherstellung, dass sichtbar ist, wenn es im Fokus steht. Browser neigen dazu, zum Teil der Seite zu scrollen, der derzeit standardmäßig den Schwerpunkt hat. Bei der Arbeit mit Scroll -Ereignissen können jedoch bestimmte Komplikationen geben.

Eine Möglichkeit, sicherzustellen, dass immer sichtbar ist, besteht darin, das CSS zu aktualisieren, um den Fokus zu berücksichtigen. Jetzt sieht unser CSS so aus:

 Nav.Scroll-up,
Nave: Focus-in-{
  Top: 0;
}

Leider wird der Focus-in-within-Selektor in allen Browsern nicht vollständig unterstützt. Wir können einen JavaScript -Fallback für ihn einfügen:

 const handlenavscroll = () => {
  if (isscrollingdown () &&! nav.contains (document.activeLement))) {
    nav.classlist.add ('scroll-down');
    nav.classlist.remove ('scrollen up')
  } anders {
    nav.classlist.add ('scroll-up');
    nav.classlist.remove ('scroll-down')
  }
}

In dieser aktualisierten Funktion wenden wir nur die Scroll-Down-Klasse an, wenn der Benutzer die Seite nach unten scrollen und die

derzeit kein Element mit dem Fokus im IT hat.

Ein weiterer Aspekt der Zugänglichkeit ist die Überlegung, dass einige Benutzer möglicherweise keine Animation auf der Seite haben möchten. Das können wir mit der CSS-Medienabfrage von Prefer-reduzierten Motionen erkennen und respektieren. Wir können diese Methode in JavaScript aktualisieren und verhindern, dass unsere Funktion überhaupt ausgeführt wird, wenn ein Benutzer eine reduzierte Bewegung bevorzugt:

 const Mediaquery = window.matchmedia ("(bevorzugt reduzierte Bewegung: Reduzierung)");

window.addeventListener ("scrollen", () => {
  if (MediaQuery &&! Mediquery.Matches) {
    Gas (Handlenavscroll, 250)
  }
});

Einpacken

Da haben wir es also: eine Implementierung von Smart Navigation mit einfachem CSS und Vanille -JavaScript. Jetzt haben Benutzer einen anhaltenden Zugriff, um auf der Website zu navigieren, ohne Immobilien auf eine Weise zu verlieren, die Inhalte blockiert.

Darüber hinaus ist der Vorteil einer benutzerdefinierten Implementierung wie dieser, dass wir eine entzückende Benutzererfahrung erhalten, die nicht überbetont oder offene Leistung oder Zugänglichkeit opfert.

Das obige ist der detaillierte Inhalt vonErstellen einer intelligenten Navi mit Vanille JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!