Scroll up and down the page to change the positioning of the top navigation

Recently I encountered a design effect requirement from a designer, which has also been implemented on other websites:

state1: When the web page is scrolled down, the page header bar disappears , the top nav moves up;

state2: When the web page scrolls up, the page header bar appears, and the top nav moves down along the nav.

The page already contains the following functions:

1. When the pop-up window pops up, the pop-up window layer can be scrolled, but the page layer does not allow scrolling. At this time, the overflow style attributes of the body element and html element in the page are set to hidden;

The page structure is as follows:

Header

Navigation one Navigation two

Main part of the page

&lt ;/footer>

Bottom of the page

The problem encountered is: the scroll event is monitored too frequently (almost every pixel is moved and a monitoring event is executed), resulting in flickering problems when elements are displayed and hidden, and sometimes even causing some elements to switch back and forth. .

In the process of solving such a problem, my solution is as follows:

1. Monitor the document's scroll down and scroll up events respectively.

2. While listening During the process, do not listen when a pop-up window pops up

3. Declare two variables in addition to the listening event, namely: permitMonitorScrollDown = true, permitMonitorScrollUp = true

4,

(1) In the process of monitoring the downward scrolling of the document, if no pop-up window currently pops up, determine whether the value of permitMonitorScrollDown is true. If it is false, return directly and jump out of the monitoring process; If it is true, set permitMonitorScrollDown to false and switch the state to state1; set the timer (js's own setTimeout function) and restore permitMonitorScrollDown to true after 2000 milliseconds. This setting is equivalent to allowing one listener for a scroll-down event every two seconds. There is another hidden point here: when the page slides down, if the state itself is state1, no operation will be performed on the state.

(2) In the process of monitoring the upward scrolling of the document, if no pop-up window currently pops up, determine whether the value of permitMonitorScrollUp is true. If it is false, return directly and jump out of the monitoring process. ; If it is true, set permitMonitorScrollUp to false and switch the state to state2; set the timer (the setTimeout function that comes with js) and restore permitMonitorScrollUp to true after 2000 milliseconds. This setting is equivalent to allowing one listener for a scroll-down event every two seconds. There is another hidden point here: when the page slides up, if the state itself is state2, no operation will be performed on the state.

5. In order to make up for the intermittent period in which the above two situations occur, the page scroll bar has reached the top or bottom, so a timer needs to be used to handle these two extreme situations separately.

(1), the page reaches the top (no pop-up window pops up and the scrollTop of the document is 0), the state must be switched to state1;

(2), the page reaches the bottom (no pop-up window pops up and the scrollTop of the document is 0) When a pop-up window pops up and the sum of document's scrollTop and $(window).height() is exactly equal to $(document).height()), the state must be switched to state2;

I The filter function of jquery is used, which is mainly used to determine whether the scroll event is not monitored when the pop-up window pops up (at the same time, there is an equivalent method: when the length of the scroll bar of the body is the same as the height of the scroll bar itself, it means that the pop-up window has appeared. . $("body")[0].scrollHeight==$("body").height()), while using the concept of exclusive lock in the program.