Sticky介紹

Sticky是CSS3的一個(gè)定位屬性，它可以讓元素在滾動(dòng)過(guò)程中“粘”在屏幕上的某個(gè)位置，直到滾動(dòng)到某個(gè)臨界點(diǎn)后才會(huì)跟隨滾動(dòng)。Sticky定位可以使得頁(yè)面更具交互性和易用性，也提高了頁(yè)面的可讀性。 Sticky定位可以通過(guò)以下代碼實(shí)現(xiàn)：

position: sticky;top: 0;

其中，top屬性定義了元素“粘”在屏幕上的位置。當(dāng)元素到達(dá)指定位置時(shí)，它將會(huì)變成固定定位，直到滾動(dòng)到指定位置后才會(huì)解除固定定位。 Sticky定位的特點(diǎn)：

1. 當(dāng)元素被滾動(dòng)到達(dá)指定位置時(shí)，它會(huì)變成固定定位，直到滾動(dòng)到指定位置后才會(huì)解除固定定位。
2. Sticky定位可以讓元素在滾動(dòng)過(guò)程中保持在屏幕上的某個(gè)位置，這提高了頁(yè)面的可讀性和易用性。
3. Sticky定位可以和其他定位屬性（如top、bottom、left、right）結(jié)合使用，從而實(shí)現(xiàn)更加復(fù)雜的布局效果。

實(shí)現(xiàn)一個(gè)高度能自動(dòng)變小的吸附需求

場(chǎng)景：客戶需要這樣一個(gè)動(dòng)態(tài)效果，就是網(wǎng)站的頂部導(dǎo)航欄在未觸及到頁(yè)面頂部時(shí)，它的高度為 100px ，隨著頁(yè)面向下滾動(dòng)，頂部導(dǎo)航欄在觸及頁(yè)面頂部時(shí)，保持在頁(yè)面頂部顯示，當(dāng)頁(yè)面繼續(xù)向下滾動(dòng)時(shí)，頂部導(dǎo)航欄導(dǎo)航欄隨滾動(dòng)減少高度，直到高度減少到50px時(shí)不再繼續(xù)減少。在以前：我們基本使用js來(lái)實(shí)現(xiàn)此效果，基本原理就是監(jiān)聽滾動(dòng)條，計(jì)算滾動(dòng)距離，動(dòng)態(tài)賦值高度和樣式。在現(xiàn)在：我們直接使用 position: sticky; 即可實(shí)現(xiàn)此效果：

<div class="header">
    <div class="header2">
    這是吸附
    </div>
</div>

.header {
    position: sticky;
    top: -50px;
    width: 100%;
    height: 100px;
    background-color: #f0f;
}
.header2 {
    position: sticky;
    top: 0;
    background-color: rgba(25,25,25,.5);
    height: 50px;
}

是不是很簡(jiǎn)單就能實(shí)現(xiàn)此效果啦，相比js一大堆邏輯代碼， position: sticky; 可簡(jiǎn)潔的不是一點(diǎn)兩點(diǎn)啦。

兼容性

可見，對(duì)現(xiàn)代瀏覽器，兼容還是不錯(cuò)噠，當(dāng)然老項(xiàng)目ie瀏覽器還是只有乖乖的寫js啦。