純CSS實(shí)現(xiàn)吸附效果

文章轉(zhuǎn)載自公眾號：IQ前端

前言

「吸附效果」就是網(wǎng)頁滾到到某個(gè)位置，元素固定在該位置，后續(xù)不隨網(wǎng)頁滾動而滾動。吸附效果很常見，譬如吸頂效果和吸底效果，經(jīng)常用在跟隨導(dǎo)航、移動廣告和懸浮提示等場景中。

原理

在 jQuery 時(shí)代就有很多吸附效果插件了，現(xiàn)在常用的三大前端框架也有自身第三方的吸附效果組件。它們都有著共通的實(shí)現(xiàn)原理：監(jiān)聽scroll事件，判斷scrollTop和目標(biāo)元素的位置范圍，符合條件則將目標(biāo)元素的position聲明為fixed，令目標(biāo)元素相對于瀏覽器窗口進(jìn)行定位，讓用戶看上去就像釘在瀏覽器指定位置上。

javascript 實(shí)現(xiàn)吸附效果的代碼在網(wǎng)上一搜一大堆，更何況筆者喜歡耍 CSS ，在此就不貼相關(guān)的JS代碼了。本文為各位同學(xué)推薦一個(gè)很少見很少用的 CSS 屬性：position:sticky。簡單的「兩行CSS核心代碼」就能完成「十多行JS核心代碼」的功能，何樂而不為呢。

實(shí)現(xiàn)

簡單回顧position常用的值，怎樣用就不說了，各位同學(xué)應(yīng)該都熟透了。

當(dāng)值為sticky時(shí)將元素變成粘性定位。「粘性定位」是相對定位和固定定位的合體，元素在特定閾值跨越前為相對定位，跨越后為固定定位。

主要是為了推廣知識點(diǎn)，直接上代碼，樣式就不細(xì)磨了，將就看吧。

<div class="ads-position">
    <ul>
        <li>Top 1</li>
        <li>Top 2</li>
        <li>Normal</li>
        <li>Bottom 1</li>
        <li>Bottom 2</li>
    </ul>
</div>

.ads-position {
    overflow: auto;
    position: relative;
    width: 400px;
    height: 280px;
    outline: 1px solid #3c9;
    ul {
        padding: 200px 0;
    }
    li {
        position: sticky;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color: #fff;
        &:nth-child(1) {
            top: 0;
            z-index: 9;
            background-color: #f66;
        }
        &:nth-child(2) {
            top: 40px;
            z-index: 9;
            background-color: #66f;
        }
        &:nth-child(3) {
            background-color: #f90;
        }
        &:nth-child(4) {
            bottom: 0;
            z-index: 9;
            background-color: #09f;
        }
        &:nth-child(5) {
            bottom: 40px;
            z-index: 9;
            background-color: #3c9;
        }
    }
}

最終效果如下。兩行CSS核心代碼分別是position:sticky和top/bottom:npx。上述Demo里5個(gè)節(jié)點(diǎn)都聲明了position:sticky，但由于top/bottom賦值有所不同就產(chǎn)生了不同的吸附效果。

細(xì)心的同學(xué)可能發(fā)現(xiàn)這些元素在某些滾動時(shí)刻處于相對定位，在特定滾動時(shí)刻就處于固定定位。

• 第1個(gè)<li>：top為0px，滾動到容器頂部就固定
• 第2個(gè)<li>：top為40px，滾動到距離容器頂部40px就固定
• 第3個(gè)<li>：沒有聲明top/bottom，就一直保持相對定位
• 第4個(gè)<li>：bottom為40px，滾動到距離容器底部40px就固定
• 第5個(gè)<li>：bottom為0px，滾動到容器底部就固定

當(dāng)然，換成left和right也一樣能實(shí)現(xiàn)橫向的吸附效果。

注意

粘性定位的參照物并不一定是position:fixed。

當(dāng)目標(biāo)元素的任意祖先元素都未聲明position:relative|absolute|fixed|sticky，才與position:fixed表現(xiàn)一致。

當(dāng)離目標(biāo)元素最近的祖先元素聲明了position:relative|absolute|fixed|sticky，目標(biāo)元素就相對該祖先元素進(jìn)行粘性定位。

確認(rèn)參照物跟position:absolute一致。

兼容

兼容性勉強(qiáng)還行，近2年發(fā)版的瀏覽器都能支持，Safari和Firefox的兼容性還是挺贊的。有吸附效果需求的同學(xué)建議一試，要兼容IExplorer就算了。

以上就是W3Cschool編程獅關(guān)于純CSS實(shí)現(xiàn)吸附效果的相關(guān)介紹了，希望對大家有所幫助。