Hi Leute,
Wie lässt sich eine Navigation beim Runterscrollen verstecken und beim beim Hochscrollen wieder anzeigen?
Hier ein Beispiel:
https://media.kulturbanause.de/blog/...roll-down.html
Die technische Erklärung dazu hier:
https://blog.kulturbanause.de/2017/0...llen-anzeigen/
Dazu verwende ich folgendes:
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');
};
});
Alles anzeigen
Jetzt meine Frage:
Was muß an dem Code wie / wo verändert oder hinzugefügt werden, damit
A) Das Scrollverhalten erst eintritt, nachdem man z.B. schon 300px runtergescrollt hat (in der DEMO der grüne Header also nicht gleich verschwindet)
und
B) beim wieder Hochscrollen das Scrollverhalten erst wieder rückgängig gemacht wird, wenn man kurz vor dem oberen Rand wieder angelangt ist, z.B. 100px vor TOP.
( in der Demo also der grüne Header nicht gleich beim hochscrollen einblendet, sondern dieser erst erscheint, wenn man 100px vor dem oberen Rand steht.)
Wie lässt sich das umsetzen?
Hier ein Beispiel, wie die Navigation bzw. der Header reagieren soll:
1 - Erst bliebt der große Header stehen,
2 - dann blendet er aus und nur die schmale horizontale Navigation ist oben zu sehen
3 - beim Rückscrollen (also wieder hoch) bleibt die schmale Navigation aus 2 erstmal noch stehen.
4 - erst am oberen Ende wird der große Header wieder eingeblendet