Zuerst der Header selbst:
.header{
position: fixed;
width: 100%;
top: 0;
left: 0;
background-color: #000;
transition: all .3s ease;
}
Jetzt fügen wir eine neue Klasse in CSS hinzu
.header.out
und sprechen sie an:
.header.out{
transform: translateY(-100%);
}
Und anschließend ein kleines JavaScript (JQuery Bibliotek muss eingebunden werden)
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;
});
Wir sind nun fertig. Wenn alles richtig verwendet wurde, muss unser Header beim Runterscrollen versteckt werden und beim Hochscrollen wieder auftauchen.