Fixierte Navigationsleisten, die sich horizontal über die volle Breite der Website erstrecken sind keine Seltenheit. Um den Blick des Anwenders auf den Inhalt zu lenken und gleichzeitig den wertvollen Platz auf dem Display bestmöglich ausnutzen zu können, wird die Navigation auch häufig beim runterscrollen versteckt und beim hochscrollen wieder angezeigt. Insbesondere sog. Onepager und Landingpages nutzen vermehrt den Effekt. In diesem Beitrag archivieren wir eine CSS/jQuery-Lösung um das Verhalten herzustellen.
HTML-Grundaufbau
Die HTML-Struktur besteht in unserem Beispiel lediglich aus einem leeren <nav>-Element.
<nav></nav>Scroll-Richtung mit jQuery abfragen
Zunächst prüfen wir mit Hilfe von jQuery in welche Richtung der Anwender scrolled. Wenn er nach unten scrolled, wird dem <body> die Klasse down hinzugefügt. Wenn es nach oben geht wird die Klasse entfernt.
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
if (!$('body').hasClass('down')) {
$('body').addClass('down');
}
} else {
$('body').removeClass('down');
}
lastScrollTop = st;
if ($(this).scrollTop() <= 0) {
$('body').removeClass('down');
};
});Verstecken der Navigation mit CSS
Der CSS-Code ist ebenfalls recht übersichtlich. Die Navigation wird eingefärbt, oben im Browserfenster fixiert und über die volle Breite ausgedehnt. Zusätzlich erhält sie eine feste Höhe und eine Transition, damit sie später animiert aus dem Viewport fährt, sobald per JavaScript die Klasse hinzugefügt wird.
Sobald die Klasse down vorhanden ist, wird mit der CSS-Eigenschaft transform die Navigation um Ihre Höhe nach oben aus dem Viewport geschoben.
nav {
height:100px;
background:lime;
position: fixed;
top:0;
right:0;
left:0;
transition: transform .25s .1s ease-in-out;
}
.down nav {
transform: translate3d(0, -100px, 0); // um 100px nach oben verschieben
}Jetzt bist Du gefragt
Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.