瀏覽器慣性滾動下如何實現導航欄吸頂!
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);當滾動條的位置達到臨界點時,就讓導航欄吸頂即可.
