Animieren eines Elements anders als in/außer Sicht auf Bildlauf nach oben/unten verschieben

Question

auf der Suche nach ein wenig Beratung. Also arbeite ich an einem neuen Portfolio für mich. Ich verwende das Bootstrap-Framework und möchte meinen Slider basierend auf der Richtung, in die der Benutzer scrollt, animieren.

So habe ich zum Beispiel bereits eine Animation, um die Navbar-Klasse zu verschieben. Aber als der Benutzer die Seite runter scrollt, will ich die Navigationsleiste ausblenden, um dem Benutzer mehr Sichtbarkeit auf dem Bildschirm beim Durchsuchen von Inhalten zu geben. Wenn sie dann versuchen, die Seite zurückzuscrollen, möchte ich die .navbar-Klasse wieder einschieben.

Jetzt kann ich das leicht zum Laufen bringen, wenn ich ein bestimmtes Element oder Pixelhöhe anvisiere, aber das hilft mir nicht. Ich weiß, dass es erreichbar ist, wie ich es auf mehreren Websites gesehen habe (linkedIn zum Beispiel).

Also frage ich mich, ob es ein Fall von positiven oder negativen Werten auf der Y-Achse oder etwas ist?

Wenn mir jemand dabei helfen kann oder mich auf eine gute Ressource hinweisen, die helfen würde. Ich finde nichts atm

Answer 1

So habe ich es geschafft, das Problem am Ende zu lösen. Wenn jemand anderes die gleiche Art von Problem hat, hoffe ich, dass dies für Sie hilfreich ist :)

var lastScrollPosition = 0; 
window.onscroll = function() { 
    var newScrollPosition = window.scrollY; 

    if (newScrollPosition < lastScrollPosition){ 
     //upward - code here 
    }else{ 
     //downward - code here 
    } 
    lastScrollPosition = newScrollPosition; 
}