Sticky是CSS3的一個定位屬性，它可以讓元素在滾動過程中“粘”在屏幕上的某個位置，直到滾動到某個臨界點(diǎn)后才會跟隨滾動。Sticky定位可以使得頁面更具交互性和易用性，也提高了頁面的可讀性。 Sticky定位可以通過以下代碼實(shí)現(xiàn)：
其中，top屬性定義了元素“粘”在屏幕上的位置。當(dāng)元素到達(dá)指定位置時，它將會變成固定定位，直到滾動到指定位置后才會解除固定定位。 Sticky定位的特點(diǎn)：
當(dāng)元素被滾動到達(dá)指定位置時，它會變成固定定位，直到滾動到指定位置后才會解除固定定位。
Sticky定位可以讓元素在滾動過程中保持在屏幕上的某個位置，這提高了頁面的可讀性和易用性。
Sticky定位可以和其他定位屬性（如top、bottom、left、right）結(jié)合使用，從而實(shí)現(xiàn)更加復(fù)雜的布局效果。
場景：客戶需要這樣一個動態(tài)效果，就是網(wǎng)站的頂部導(dǎo)航欄在未觸及到頁面頂部時，它的高度為100px，隨著頁面向下滾動，頂部導(dǎo)航欄在觸及頁面頂部時，保持在頁面頂部顯示，當(dāng)頁面繼續(xù)向下滾動時，頂部導(dǎo)航欄導(dǎo)航欄隨滾動減少高度，直到高度減少到50px時不再繼續(xù)減少。在以前：我們基本使用js來實(shí)現(xiàn)此效果，基本原理就是監(jiān)聽滾動條，計算滾動距離，動態(tài)賦值高度和樣式。在現(xiàn)在：我們直接使用position: sticky;即可實(shí)現(xiàn)此效果：
是不是很簡單就能實(shí)現(xiàn)此效果啦，相比js一大堆邏輯代碼，position: sticky;可簡潔的不是一點(diǎn)兩點(diǎn)啦
可見，對現(xiàn)代瀏覽器，兼容還是不錯噠，當(dāng)然老項目ie瀏覽器還是只有乖乖的寫js啦
牽手 持續(xù)為你分享各類知識和軟件 ，歡迎訪問、關(guān)注、討論 并留下你的小心心?
