以前做滾動吸頂都是使用position: fixed;,通過監聽頁面的滾動距離或者是吸頂元素距離top頂部的距離做計算判斷是否需求吸頂，這樣做影響頁面效能，**量也增多了，最近逛知乎發現乙個 position 還有乙個好用的 屬性值用來做吸頂動效；那就是sticky；查了乙個資料，屬於新增屬性值，sticky 比較有意思的就是 當給元素設定裡sticky ，在螢幕的範圍內，該元素不受定位的影響，當該元素的位置將要移出偏移的範圍時，該元素的會變成fixed定位，根據設定的left ，top值等屬性成固定定位的效果；
mozilla 給的解釋比較好理解：粘性定位可以被認為是相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位，之後為固定定位
用來實現吸頂，可以將top值設定為0
// html
越努力越幸運!
// css
.hello
.scroll
.sticky
CSS實現滑動吸頂功能
首先先上效果圖，來篩選需要學習的同伴 驅逐，大佬退散！接下來就是我們的核心實現了 item id沒錯，就是這麼兩行css 一行js 都不需要，開心不開心！接下來就是打擊你們的時候到了，讓我們看看瀏覽器對這個特性的相容性 需要考慮瀏覽器相容性的就要慎重考慮這個實現方案了。檢視特性相容性 caniuse...
vue監聽滾動事件 實現某元素吸頂或者固定位置顯示
1 監聽滾動事件 利用vue寫乙個在控制台列印當前的scrolltop,首先，在mounted鉤子中給window新增乙個滾動滾動監聽事件，mounted 然後在方法中，新增這個handlescroll方法 handlescroll 2 監聽元素到頂部的距離 並判斷滾動的距離如果大於了元素到頂部的距...
vue監聽滾動事件 實現某元素吸頂或者固定位置顯示
1 監聽滾動事件 利用vue寫乙個在控制台列印當前的scrolltop,首先，在mounted鉤子中給window新增乙個滾動滾動監聽事件，mounted function 然後在方法中，新增這個handlescroll方法 2 監聽元素到頂部的距離 並判斷滾動的距離如果大於了元素到頂部的距離時，設...