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

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

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