首先先上效果圖，來篩選需要學習的同伴（驅逐，大佬退散！！！）
接下來就是我們的核心實現了：
.item-id接下來就是打擊你們的時候到了，讓我們看看瀏覽器對這個特性的相容性：
需要考慮瀏覽器相容性的就要慎重考慮這個實現方案了。（檢視特性相容性**：caniuse）
它的使用方法就是首先我們設定需要滑動吸頂的元素position：sticky；
然後設定top值，這個值表示元素距離頁面視口的頂部距離，當距離大於我們設定的闕值時，元素表現為relative,而小於這個值時元素表現為fixed，固定在這個闕值的位置。
在使用這個特性時我們要注意以下情況：
設定為position：sticky的元素的任意父節點的overflow必須是visible，否則不會生效，至於為什麼？
那當然是因為父元素設定為overflow：hidden時就不滾動了所以不會觸發。所以我們得出設定為scroll時也是可以觸發的（劃去，這不是廢話嘛）
參考資料：chokcoco大神的部落格，大神的css使用讓我這個萌新瑟瑟發抖。
滑動吸頂實現
在很多應用中，看到這樣的listview listview滑動過程中分組標題固定在上方，當第二個組滑上來時，第乙個組才跟著上滑，下乙個組固定，直到該組也滑出上邊緣。世上無難事只怕有心人，在github上就有人做出來了，而且效果很好 後來發現安卓自帶應用中聯絡人應用就是這樣的，估計github的作者也...
css實現滾動吸頂之 粘性定位
以前做滾動吸頂都是使用position fixed 通過監聽頁面的滾動距離或者是吸頂元素距離top頂部的距離做計算判斷是否需求吸頂，這樣做影響頁面效能，量也增多了，最近逛知乎發現乙個 position 還有乙個好用的 屬性值用來做吸頂動效 那就是sticky 查了乙個資料，屬於新增屬性值，stick...
頁面滾動到某一位置吸頂 談談滑動頁面時的吸頂內容
背景最近在優化一些產品的頁面，某些頁面使用者在往上滑動的時候，想要做一些更符合使用者使用場景的內容調整，在做之前，大概分析了下一些主流產品的做法。在大量的分析一些產品後，發現滾動頁面時凍結內容的變化形式大概分為以下幾種 1 改變背景和元素樣式 2 隱藏導航欄 沉浸式瀏覽內容 3 更改布局 壓縮空間 ...