浏览器惯性滚动下如何实现导航栏吸顶!

浏览器惯性滚动下如何实现导航栏吸顶!

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);当滚动条的位置达到临界点时,就让导航栏吸顶即可.