Wie blende ich ein Menü ein oder aus, wenn ich nach unten oder oben blättern möchte?
Wenn ich nach unten scrolle, um dieses Menü auszublenden, und wenn ich nach oben scrolle, um dies anzuzeigen.
Mein Menü Bot ist:
%Vor%Mit dem obigen Skript versuche ich, mein Menü zu verbergen. Mein CSS für die Menü-Fußzeile lautet:
%Vor%Was fehlt mir, damit dieses Skript funktioniert? Wenn Sie eine andere Lösung für mich haben, wird es hilfreich sein.
2 Antworten
Ich habe dieses erste Beispiel in einfachem Javascript erstellt, um es mit einem kurzen Blick in den Code zu verstehen. Es verbirgt das Menü, indem es das untere Attribut des CSS-Stils (von 0 bis -100) entsprechend der Position der Bildlaufleiste ändert (wenn die Bildlaufleiste mehr als 0 Pixel von oben entfernt ist). Das Menü wird wieder angezeigt (von -100 bis 0), wenn die Bildlaufleiste wieder nach oben zeigt (0px). Ein CSS-Übergangseffekt animiert die Änderung:
Update: Wie in den Kommentaren gefordert, wird durch dieses zweite Snippet das Menü beim Scrollen nach oben / unten angezeigt / ausgeblendet, unabhängig von der aktuellen Position des Balkens (um die Richtung zu finden, wenn der Scroll aktiviert ist vergleicht die aktuelle Position mit der vorherigen Position und speichert dann die aktuelle Position in einer Variablen, die im nächsten Scroll-Ereignis verglichen werden soll):
Grundsätzlich müssen Sie dies mit 3 Hauptideen erreichen.
- Setze Menü / Kopfzeile auf fixed.
- Wenn Sie nach unten scrollen, fügen Sie eine Klasse hinzu, um die Kopfzeile / das Menü zu entfernen.
- Entfernen Sie beim Scrollen die Klasse, die den Header / das Menü versteckt.
Hier ist eine Demo von Marius Craciunoiu
Html:
%Vor%Javascript:
%Vor%CSS:
%Vor%Tags und Links javascript html jquery css