頁面上下滾動改變頂部導航的定位方式-js教程-PHP中文網

最近碰到設計師的一個設計效果要求，其他網站也有實現：

state1:當網頁向下捲動時，頁面header欄消失，頂部nav往上靠；

state2:當網頁向上滾動時，頁header欄出現，頂部nav順著nav往下靠。

頁面已經含有以下功能：

1、彈窗彈出時，彈跳視窗層可捲動，但頁面層不允許捲動。此時，頁面中的body元素和html元素的overflow樣式屬性都被設定成了hidden；

頁面結構如下：

頭

# 導航一 導航二

頁面主體部分

#

#&lt ;/footer>

頁面底部

#

所碰到的問題是：scroll事件的監聽太頻繁（幾乎移動一個像素就要執行一次監聽事件），導致元素顯示和隱藏時有閃動的問題，有時甚至會導致某些元素來回切換。

在解決這樣的問題的過程中，我的解決思路如下：

1、分別監聽document的向下滾動和向上滾動事件

2、在監聽的過程中，遇到彈窗彈出時不監聽

3、在監聽事件之外宣告兩個變量，分別為：permitMonitorScrollDown = true, permitMonitorScrollUp = true

4、

（1）、在監聽document的向下滾動的流程中，在當前沒有彈出窗口彈出的情況下，判斷permitMonitorScrollDown的值是否為true，若為false，則直接return，跳出該監聽流程；若為true，則將permitMonitorScrollDown設為false，將狀態切換至state1；設定計時器（js自帶的setTimeout函數），在2000毫秒後恢復permitMonitorScrollDown為true。這種設定等價於每隔兩秒允許監聽一次向下滾動的事件。這裡還隱藏有一點：當頁面下滑，若切狀態本身為state1時，就不對狀態做任何操作。

（2）、在監聽document的向上滾動的流程中，在當前沒有彈出窗口彈出的情況下，判斷permitMonitorScrollUp的值是否為true，若為false，則直接return，跳出該監聽流程；若為true，則將permitMonitorScrollUp設為false，將狀態切換到state2；設定計時器（js自帶的setTimeout函數），在2000毫秒後恢復permitMonitorScrollUp為true。這種設定等價於每隔兩秒允許監聽一次向下滾動的事件。這裡還隱藏有一點：當頁面上滑，若切狀態本身為state2時，不對狀態做任何操作。

5、為了彌補上方兩種情況發生的間歇期間頁面滾動條已經觸頂或觸底，所以需要用定時器單獨處理這兩種極端情況。

（1）、頁面觸頂（沒有任何彈跳窗彈出且document的scrollTop為0），則狀態必須切換到state1；

（2）、頁面觸底（沒有任何彈跳窗彈出且document的scrollTop與$(window).height()的和剛好等於$(document).height()），則狀態必須切換到state2;

我運用了jquery的filter函數，主要用於判斷彈跳窗彈出時不監聽滾動事件的情況（同時有一種等價的方式：當body的滾動條長度和滾動條本身的高度一樣時，代表彈窗出現了。