Scroll-Effekte für Header

  • 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:

    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:


    http://t3n.de/



    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

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!