瀏覽器慣性滾動下如何實現導航欄吸頂!

瀏覽器慣性滾動下如何實現導航欄吸頂!

1.最近項目中有這樣一個需求:當頁面向下滾動到必定位置時,須要把介紹商品的兩個導航欄(商品介紹,注意事項)作吸頂處理

瓜熟蒂落會想到監聽瀏覽器滾動條的位置,一旦到達導航欄的位置,就對它進行吸頂.那麼問題來了,怎麼監聽滾動呢?

這裏能夠想到兩個方法:

---

1.監聽touchmove事件;

2.window.addEventListener('scroll',callback);

先說說第一種方法,手指在手機屏幕上滑動就會觸發,可是對於絕大多數手機來講,當咱們手指滑動一段距離以後,即便擡起了手指,網頁也會有一段慣性滑動,然而遺憾的是,這段慣性滑動不會觸發touchmove,也不會觸發touchend事件.這樣就可能致使咱們沒法及時監聽到滾動條的正確位置,從而在第一時間對導航欄進行置頂.

再說說第二種方法:這種方法的好處在於它可以監聽瀏覽器的慣性滾動,這樣咱們能夠實時拿到正確的滾動條位置.可是這種方法也有一些弊端,那就是在ios上,瀏覽器在滾動期間,不會觸發callback裏面的函數,只有在scroll結束時,纔會觸發,但android上表現還算正常.因此綜上所述,我才用了以下方法實現個人吸頂:

針對ios,可使用css3的一個新屬性:position:sticky,-webkit-sticky;給我們須要吸頂的標籤設置上這個屬性,一旦當屏幕滾動到這個元素的位置時,它會立馬吸頂,無需其它的js操做,着實太方便了.可是目前安卓還沒有支持此屬性.

針對android,就用window.addEventListener('scroll',callback);當滾動條的位置達到臨界點時,就讓導航欄吸頂便可.