Scrollen Sie auf der Seite nach oben und unten, um die Positionierung der oberen Navigation zu ändern-js-Tutorial-php.cn

Kürzlich bin ich auf eine Design-Effekt-Anforderung eines Designers gestoßen, die auch auf anderen Websites umgesetzt wurde:

state1: Wenn die Webseite nach unten gescrollt wird , die Seitenkopfleiste verschwindet, die obere Navigation bewegt sich nach oben

state2: Wenn die Webseite nach oben scrollt, erscheint die Seitenkopfleiste und die obere Navigation bewegt sich entlang der Navigation nach unten.

Die Seite enthält bereits die folgenden Funktionen:

1. Wenn das Popup-Fenster angezeigt wird, kann in der Popup-Fensterebene gescrollt werden, die Seitenebene ermöglicht jedoch kein Scrollen. Zu diesem Zeitpunkt sind die Überlaufstilattribute des Body-Elements und des HTML-Elements auf der Seite auf ausgeblendet

Die Seitenstruktur ist wie folgt:

Header

Navigation eins Navigation zwei

Hauptteil der Seite

&lt ;/footer>

Unten auf der Seite

Das aufgetretene Problem ist: Die Überwachung des Scroll-Ereignisses erfolgt zu häufig (fast jedes Pixel wird verschoben und ein Überwachungsereignis wird ausgeführt), was zu Flackerproblemen beim Ein- und Ausblenden von Elementen führt Manchmal kommt es sogar dazu, dass einige Elemente hin und her wechseln.

Im Prozess der Lösung eines solchen Problems ist meine Lösung wie folgt:

1. Überwachen Sie die Scroll-Down- bzw. Scroll-Up-Ereignisse des Dokuments

2 , nicht zuhören, wenn ein Popup-Fenster erscheint

3 Deklarieren Sie zwei Variablen außerhalb des Listening-Ereignisses, nämlich: AllowMonitorScrollDown = true, PermitMonitorScrollUp = True

4,

(1) Wenn beim Überwachen des Abwärtsscrollens des Dokuments derzeit kein Popup-Fenster angezeigt wird, stellen Sie fest, ob der Wert von „permitMonitorScrollDown“ wahr ist. Wenn er falsch ist, kehren Sie direkt zurück und verlassen Sie den Überwachungsprozess ; Wenn es „true“ ist, setzen Sie „permitMonitorScrollDown“ auf „false“ und schalten Sie den Status auf „state1“ um. Diese Einstellung entspricht dem Abhören eines Scroll-Down-Ereignisses alle zwei Sekunden. Hier gibt es noch einen weiteren versteckten Punkt: Wenn die Seite nach unten gleitet und der Status selbst Status1 ist, wird keine Operation für den Status ausgeführt.

(2) Wenn beim Überwachen des Aufwärtsscrollens des Dokuments derzeit kein Popup-Fenster angezeigt wird, stellen Sie fest, ob der Wert von „permitMonitorScrollUp“ wahr ist. Wenn er falsch ist, kehren Sie direkt zurück und springen Sie heraus ; Wenn es „true“ ist, setzen Sie „permitMonitorScrollUp“ auf „false“ und setzen Sie den Timer (die mit js gelieferte Funktion „setTimeout“) und stellen Sie „permitMonitorScrollUp“ nach 2000 Millisekunden auf „true“ wieder her. Diese Einstellung entspricht dem Abhören eines Scroll-Down-Ereignisses alle zwei Sekunden. Hier gibt es noch einen weiteren versteckten Punkt: Wenn die Seite nach oben verschoben wird und der Status selbst Status2 ist, wird keine Operation für den Status ausgeführt.

5. Um den zwischenzeitlichen Zeitraum auszugleichen, in dem die beiden oben genannten Situationen auftreten, ist die Bildlaufleiste der Seite oben oder unten angekommen. Daher muss ein Timer verwendet werden, um diese beiden Extremsituationen getrennt zu behandeln .

(1), die Seite erreicht den Anfang (es erscheint kein Popup-Fenster und der ScrollTop des Dokuments ist 0), dann muss der Status auf Status1 umgestellt werden (2 ), erreicht die Seite den unteren Rand (es gibt kein Popup-Fenster). Wenn ein Popup-Fenster angezeigt wird und die Summe aus scrollTop und $(window).height() des Dokuments genau gleich $(document).height ist ()), der Status muss auf state2 umgeschaltet werden;

I Die Filterfunktion von jquery wird hauptsächlich verwendet, um zu bestimmen, ob das Scroll-Ereignis nicht überwacht wird, wenn das Pop- Das Popup-Fenster wird angezeigt (Gleichzeitig gibt es eine äquivalente Methode: Wenn die Länge der Bildlaufleiste des Körpers mit der Höhe der Bildlaufleiste selbst übereinstimmt, bedeutet dies, dass das Popup-Fenster angezeigt wurde. . $("body")[0].scrollHeight==$("body").height()), während das Konzept der exklusiven Sperre im Programm verwendet wird.

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

Scrollen Sie auf der Seite nach oben und unten, um die Positionierung der oberen Navigation zu ändern