Faites défiler la page de haut en bas pour modifier le positionnement de la navigation supérieure

Récemment, j'ai rencontré une exigence d'effet de conception de la part d'un concepteur, qui a également été implémentée sur d'autres sites Web :

state1 : lorsque la page Web défile vers le bas , la barre d'en-tête de la page disparaît, la barre de navigation supérieure monte ;

state2 : lorsque la page Web défile vers le haut, la barre d'en-tête de la page apparaît et la barre de navigation supérieure descend le long de la navigation.

La page contient déjà les fonctions suivantes :

1. Lorsque la fenêtre contextuelle apparaît, le calque de la fenêtre contextuelle peut défiler, mais le calque de la page ne permet pas le défilement. À l'heure actuelle, les attributs de style de débordement de l'élément body et de l'élément html dans la page sont définis sur cachés

La structure de la page est la suivante :

Header

Navigation un Navigation deux

Partie principale de la page

Bas de la page

Le problème rencontré est le suivant : la surveillance des événements de défilement est trop fréquente (presque tous les pixels sont déplacés et un événement de surveillance est exécuté), ce qui entraîne des problèmes de scintillement lorsque les éléments sont affichés et masqués, et parfois provoquant même le basculement de certains éléments.

Dans le processus de résolution d'un tel problème, ma solution est la suivante :

1. Surveillez respectivement les événements de défilement vers le bas et vers le haut du document

2. le processus, n'écoutez pas lorsqu'une fenêtre pop-up apparaît

3 Déclarez deux variables en dehors de l'événement d'écoute, à savoir : permitMonitorScrollDown = true, permitMonitorScrollUp = true

4,

(1) Dans le processus de surveillance du défilement vers le bas du document, si aucune fenêtre contextuelle n'apparaît actuellement, déterminez si la valeur de permitMonitorScrollDown est vraie. Si elle est fausse, revenez directement et sortez du. processus de surveillance ; Si c'est vrai, définissez permitMonitorScrollDown sur false et passez l'état à state1 ; définissez la minuterie (la propre fonction setTimeout de js) et restaurez permitMonitorScrollDown sur true après 2000 millisecondes. Ce paramètre équivaut à autoriser un auditeur pour un événement de défilement vers le bas toutes les deux secondes. Il y a un autre point caché ici : lorsque la page glisse vers le bas, si l'état lui-même est state1, aucune opération ne sera effectuée sur l'état.

(2) Dans le processus de surveillance du défilement vers le haut du document, lorsqu'aucune fenêtre contextuelle n'apparaît actuellement, déterminez si la valeur de permitMonitorScrollUp est vraie. Si elle est fausse, revenez directement et sautez. du processus de surveillance. Si c'est vrai, définissez permitMonitorScrollUp sur false et passez l'état à state2 ; définissez la minuterie (la fonction setTimeout fournie avec js) et restaurez permitMonitorScrollUp sur true après 2000 millisecondes. Ce paramètre équivaut à autoriser un auditeur pour un événement de défilement vers le bas toutes les deux secondes. Il y a un autre point caché ici : lorsque la page remonte, si l'état lui-même est state2, aucune opération ne sera effectuée sur l'état.

5. Afin de compenser la période intermittente au cours de laquelle les deux situations ci-dessus se produisent, la barre de défilement de la page a atteint le haut ou le bas, une minuterie doit donc être utilisée pour gérer ces deux situations extrêmes séparément. .

(1), la page atteint le haut (aucune fenêtre pop-up n'apparaît et le scrollTop du document est 0), alors l'état doit être basculé sur state1; ), la page atteint le bas (il n'y en a pas. Lorsqu'une fenêtre pop-up apparaît et que la somme du scrollTop du document et de $(window).height() est exactement égale à $(document).height()), le state doit être commuté sur state2;

i La fonction de filtre de jquery est utilisée, qui est principalement utilisée pour déterminer si l'événement de défilement n'est pas surveillé lorsque la fenêtre contextuelle apparaît ( en même temps, il existe une méthode équivalente : lorsque la longueur de la barre de défilement du corps est la même que la hauteur de la barre de défilement elle-même, cela signifie que la fenêtre pop-up est apparue . )([0].scrollHeight==$("body").height()), tout en utilisant la notion de verrouillage exclusif dans le programme.