Sticky Header
Header Styling
Zuerst fügen wir die CSS-Regeln für einen fixierten Header hinzu. Dieser Header bleibt am oberen Rand der Seite fixiert und wird beim Scrollen nach unten sanft ausgeblendet:
.header{
position: fixed;
width: 100%;
top: 0;
left: 0;
background-color: #000;
transition: all .3s ease;
}
Eine Klasse für das Ausblenden hinzufügen
Als nächstes fügen wir eine neue CSS-Klasse hinzu, die dafür sorgt, dass der Header nach oben außerhalb des sichtbaren Bereichs verschoben wird:
.header.out{
transform: translateY(-100%);
}
JavaScript für das Ein- und Ausblenden
Zum Schluss benötigen wir ein kleines JavaScript (die jQuery-Bibliothek muss eingebunden werden), um den Header beim Scrollen ein- und auszublenden:
var header = $('.header'),
scrollPrev = 0;
$(window).scroll(function() {
var scrolled = $(window).scrollTop();
if ( scrolled > 100 && scrolled > scrollPrev ) {
header.addClass('out');
} else {
header.removeClass('out');
}
scrollPrev = scrolled;
});
Mit diesen wenigen CSS und JavaScript Zeilen haben wir einen Header erstellt, der beim Scrollen nach unten verschwindet und beim Scrollen nach oben wieder erscheint. Dies kann die Benutzerfreundlichkeit Ihrer Webseite verbessern, indem der Header nur dann angezeigt wird, wenn er benötigt wird.