Tab吸顶功能解决ios不能实时监听onscroll的问题

问题：近期项目需要一个类似Tab吸顶功能，当页面向上滚动距离顶部一定高度后，tab用position:fixed固定在顶部。

解决方法：首先是window.onscroll方法

css:

　　.fixed{position:fixed;-webkit-transform: translateZ(0);width:100%;top:0;z-index:999;}

javascript:
　　window.onscroll = function () {

　　　　var divTop= document.getElementById('divTop');

　　　　var scrollHeight= document.documentElement.scrollTop || document.body.scrollTop;

　　　　if(scrollHeight>160){ //当滚动高度超过160赋予div  fixed属性，将其固定在顶部
　　　　　　divTop.className = 'divTop fixed'
　　　　}else{
　　　　　　divTop.className='divTop'
　　　　}
　　}

结果：该方法在安卓和浏览器上效果很好，可是在ios手机上出现了不能实时监听scroll滚动的问题，导致滚动停止后，position:fixed固定的tab才显示出来

原因：iOS 的 webview 内核设定了其在进弹性滚动时，会停止所有的事件响应及 DOM 操作引起的页面渲染。

解决方法：

1、touchmove

　window.ontouchmove = function(e){
　　var e = event || window.event; 　　 
　　var divTop= document.getElementById('divTop');
　　　　var scrollHeight= document.documentElement.scrollTop || document.body.scrollTop;
　　　　if(scrollHeight>160){//当滚动高度超过160赋予div  fixed属性，将其固定在顶部
　　　　　　divTop.className = 'divTop fixed'
　　　　}else{
　　　　　　divTop.className='divTop'
　　　　}
　}

touchmove会有一个问题，当手滑动较快时，手指离开屏幕还会有一个惯性滑动，而这惯性滑动touchmove是监听不到的

所以只有在加入一个window.onscroll来监听惯性滑动结束时的scroll，

window.ontouchmove = function(e){}

window.onscroll = function () {}

2、position:sticky粘性定位元素

需注意的是：

a、粘性定位是相对定位和固定定位的混合，在目标区域是行为变现为relative属性，当滚动超出目标区域时表现为fixed属性

b、需指定top,bottom，left,right其中的至少一个阀值，top优先级高于bottom，left高于right

c、设定sticky元素的父节点overflow:visible属性，也就是说元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量

d、该元素不脱离文本流

使用该属性我们只需给div设定一个class

.sticky{position: -webkit-sticky;position: sticky;top: 0;width:100%;z-index:99999;}

.divTop{width:100%;height:200px;line-height:200px;text-align:center;}

<div class='divTop sticky' id='divTop'>吸顶</div>

以上为sticky的解决方法，该方法只需增加sticky属性，方法简便，推荐使用

3、用better-scroll插件，监听scroll滚动，我用这个方法，因为上面两种我都没搞出来