筆者剛剛結束**的工作，現在加入了一家有青春活力的垂直電商公司，正對著阿里巴巴的西溪園區，最近一直在熟悉新的工作環境和規範，因此部落格有好些時間沒有更新了，在此抱歉！
在忙碌完公司的發布系統之後，逐漸接觸到具體的業務。在這裡主要介紹下關於css3草案的position：sticky屬性的相容。
目前前端的h5有個需求，就是「當頁面上的若干個標題被拖動到視口的頂部時，則顯示乙個被定位到視口的頂部的tab標籤，可對這個tab標籤進行點選導航，並在某個特殊的情況下隱藏」。最簡單粗暴的做法就是針對document.body做scroll偵聽，在函式中遍歷所有的標題並計算出getboundingclientrect計算出距離適口的頂部距離，決定是否顯示tab欄或者活動標籤，但是在這裡可能會出現一些效能問題：
+ 在瀏覽器端和安卓裝置上，scroll事件連續觸發，如果在偵聽函式中做過於複雜的判斷，肯定會暫時阻塞ui（主）執行緒的渲染，造成卡頓
+ 每次在偵聽函式中都執行一次getboundingclientrect函式，都會導致ui執行緒重新整理渲染佇列，進行一次layout和repaint，有可能造成卡頓
+ 在ios裝置中，scroll事件在上下滑動的過程中js不會連續執行，只在滑動結束的時刻執行一次，並且不支援左右滑動事件的觸發
針對上述問題進行修復，其實並不困難：
+ 針對scroll做throttle節流，避免每次滑動都執行，可以設定時間間隔，如50ms
+ 在偵聽函式中計算元素的layout屬性，可用settimeout在定時器佇列尾插入任務，非同步渲染
+ ios裝置實現了乙個屬性－position：sticky，可以不用js來完成粘性布局
針對sticky布局的相容性，我們很容易相容大多數移動端瀏覽器。在pc和安卓的chrome中並未實現該屬性，而在pc和ios 的safari中全部相容該屬性，因此針對ios可以單獨使用sticky完成相容。
sticky布局有著幾個條件：
+ 元素並不會脫離文件流，當元素被粘在視口的頂部時，原來在文件流中的位置仍然佔據，這點類似relative定位
+ 元素相對於其最近可滾動的祖先元素「粘性定位」，如果其祖先元素都不能滾動，則相對於適口定位
+ 元素最近的祖先元素overflow設定為非預設值visible時，則元素相對於該祖先元素進行sticky定位。若最近的祖先元素設定為overflow:hidden，則元素不會sticky定位
因此解決ios的**可以這樣：
// sticky類為粘性布局的樣式設定
if (gtios6)
.sticky
由position sticky 想到的
這個ui的主要核心思想是 1級分類導航，當導航目錄項scroll到螢幕最頂上時，就暫時固定住，這時scroll的內容就是這個目錄下的內容，直到此目錄內容全部顯示完畢後，才會整體向下滾動 position sticky 的乙個問題就是，內部的垂直scroll時，原來整個網頁上面的內容是看不到的，使用者...
粘性布局position sticky
開篇 頁面開發中常用到固定定位fixed，不過fixed會浮動脫離文件流，於是又要清除浮動，即麻煩有時又未必能夠清除浮動，於是sticky華麗出場 介紹 sticky是css3中新增的position屬性，設定了sticky的元素，在螢幕範圍 viewport 內該元素的位置並不受到定位影響 設定是...
關於position sticky的作用域
是position relative和position fixed 的集合體 吸頂效果 執行邏輯 當沒有滾動條不滾動的時候。執行是position relative 當有滾動條滾動的時候。執行是position fixed 新增 position sticky 屬性的標籤，其作用域相對於其父元素而言...