類似吸頂功能解決io不能實時監聽onscroll的觸發問題
問題：近期項目需要一個類似西東功能，當頁面向上滾動160px後div固定在頂部
解決方法：首先，想到的是window.onscroll方法
.fixed{position:fixed;-webkit-transform: translateZ(0);width:100%;top:0;z-index:99999;}
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滾動的問題
原因：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、引用iscroll插件，因為我的是單頁面的一個功能，沒有大量使用這個功能，所以沒有用iscroll方法，不過據說效果也不錯
類似吸頂功能解決io不能實時監聽onscroll的觸發問題