Erstellen Sie mit Headroom.js eine automatisch verdeckte Sticky-Kopfzeile

Kopfzeilen automatisch ausblenden sind seit langem im Webdesign sehr beliebt. Viele Blogs und Online-Magazine verwenden den Sticky-Header halten Sie die Benutzer in Kontakt und geben Sie ihnen direkten Zugang zur Navigation.

Medium hat Diese Funktion wurde neu definiert mit einem Grundkonzept das verbirgt die Navigation während Herunterscrollen aber zeigt es während nach oben scrollen. Dieses Konzept wurde zu einem wild populärer Trend und jetzt kannst du leicht repliziere es mit Headroom.js.

Headroom.js ist ein Kostenlose Vanille-JavaScript-Bibliothek ohne Abhängigkeiten oder übermäßige API-Funktionen. Sie fügen es einfach in Ihren HTML-Code ein, zielen auf den Kopf der Seite und lassen Sie ihn ausführen.

Headroom einfach fügt bestimmte CSS-Klassen hinzu, die animiert werden, und entfernt sie damit Ein- / Ausblenden der Kopfzeile Verwenden von JavaScript zum Erkennen der Bewegung.

Sie können diese Funktionalität selbst erstellen, aber warum? Headroom ist getestet und unterstützt alle gängigen Browser. Es sogar spielt gut mit jQuery oder Zepto wenn Sie bereits eine JS-Bibliothek auf Ihrer Site installiert haben.

Du wirst es finden viele Codebeispiele im GitHub Repo aber hier ist ein einfaches Beispiel das zielt auf die #Header Element:

 var myElement = document.querySelector ("# header"); // ein Headroom-Objekt erstellen, das im #Header-Element übergeben wird var headroom = new Headroom (myElement); // die Bibliothek initialisieren headroom.init (); 

Das drin() Funktion hat viele Optionen zum Anpassen. Sie können die verschiedenen anpassen Elementklassen, zusammen mit anderen Ereignis Auslöser Rückrufe wo Du kannst binden Sie Ihre eigenen Funktionen ein. Wenn Sie zum Beispiel möchten, dass das Element nach dem Auflösen nicht mehr angezeigt wird, verwenden Sie das Element onUnpin Ruf zurück.

Diese Optionen sind alle auf der Hauptseite des Plugins aufgeführt, Schauen Sie sich das an und sehen Sie, was Sie denken. Wenn du sehen willst Headroom in Aktion Schauen Sie sich den Stift unten an, der eine enthält vollständiger Klon der Hauptdemoseite.