WEB移動端粘黏吸頂效果的解決方案

原文連接: Fyerl's Blog

通常的header吸頂，一般是給上一個fixed定位即可實現，而相似於上圖這樣的「粘黏吸頂」，也是一個比較常見的需求

「粘黏吸頂」大概的思路是這樣：首先，給吸頂欄一個absolute或者relative定位，經過js去監聽scroll事件觸發一個判斷吸頂欄高度的函數，當吸頂欄的高度距離可視區域頂部小於等於0時，將其定位方式替換成fixed，大於0時再替換回absolute或者relative

以上的思路在PC端和安卓端均是可行的，但在iOS上，判斷高度的函數卻並不會隨着scroll事件每次都觸發，而是在滑動中止後纔去觸發這個函數

google一下「iOS onscroll event delay」得知，這是iOS8做出的改變，在web頁面滾動時，不觸發和執行js
http://developer.telerik.com/...

這裏我只是須要實現一個吸頂效果，不涉及其餘邏輯代碼，若是必定要經過scroll觸發的話，只能使用iSroll等其餘第三方庫來取代iOS的原生滾動

回到吸頂問題，爲了一個效果引入一個第三方庫的成本有點大，因而又尋找了一下，發現了一個知道可是沒有重視過的position屬性sticky，顧名思義，這個屬性的做用就是粘黏，理論上是不須要經過js就能實現「粘黏吸頂」的，可是這個屬性在PC端以及安卓移動端的表現不盡人意，兼容性仍是差了點，然而，在iOS端的表現卻很是出色，iOS6.1以上的系統均支持

因此最後的解決方案就是：
首先判斷當前系統，若是是Android，就經過常規的監聽scroll事件並使用fixed定位；iOS便使用sticky定位

//Android
.tab-box-fixed {
  position: fixed;
  z-index: 5;
}
//iOS
.tab-box-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 5;
}