回顧一下

開通博客之后，潦草的寫了幾篇，之后由于沒時間，加上文筆不好等等（好吧，都是借口），基本上就沒怎么寫過了，其實平時也做了一些記錄，但就是犯懶，沒有去整理。現在打算重新開始了，記錄一些自己學習過程中，對一些新的知識的理解，不一定對，目的就是鞭策自己不斷的去反省，總結。

---

正文

場景

OK，回歸正題。相信大家在移動端頁面里，經常會遇到一個場景，頁面里有個導航欄，當用戶向下滑動的時候，將導航欄固定到頁面頂部。

這種布局其實實現起來非常簡單，通常我們都會監聽window的scoll事件，當頁面滾動到某個位置時，將導航條的position設為fixed,否則，取消fixed。

問題來了

但是~~在安卓設備里，沒毛病，在iOS設備里，問題就來了，在iOS上會發現，頁面向下滑，手指離開頁面，還會有一段滾動，但是滾到相應的位置時，我們的導航條并沒有fix到頂部，而是當頁面停止滾動的時候，fixed才會生效。所以這時候，導航欄會有個跳動的效果，剛開始測試妹子給我提bug，我一度認為這尼瑪不是bug啊。。。后來研究了一下

原因及解決方案

在iOS設備上，iOS下的瀏覽器會在頁面滾動的時候，會暫停所有js的執行，直到滾動停止才會繼續去執行js（注意暫停了所有js的執行，所以考慮用setTimeout或setInterval也是沒有用的）。所以頁面滾動時，scroll事件在iOS的瀏覽器下并不會持續被觸發，而是在頁面滾動停止后，才會去觸發一次scroll事件。 這就是問題的根源。

然后，萬能的CSS，position還有一個不常見的屬性：sticky，使用position:sticky,可以完美的解決這個問題，但這個屬性支持度并不好，因此可以先通過以下代碼先判斷是否支持：

_supportSticky() {let e, i = "-webkit-sticky", s = document.createElement("i");s.style.position = i;e = s.style.position;s = null;return e === i}

如果支持，就給設置position: -webkit-sticky,top:0;這樣，就可以完美實現fixed效果，但是注意：如父容器設置屬性overflow:hidden，父容器根本就不能滾動，所以sticky元素也不會有滾動然后固定的情況。sticky效果就不會生效。

這樣，我們在iOS平臺里，先判斷是否支持sticky屬性是否支持，如果支持，就使用sticky，完美~

轉載于:https://www.cnblogs.com/lkp-blog/p/7506101.html

總結

以上是生活随笔為你收集整理的IOS6+ 下，使用position:sticky实现粘性布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。