文章轉(zhuǎn)載自公眾號(hào):IQ前端
前言
「吸附效果」就是網(wǎng)頁(yè)滾到到某個(gè)位置,元素固定在該位置,后續(xù)不隨網(wǎng)頁(yè)滾動(dòng)而滾動(dòng)。吸附效果
很常見,譬如吸頂效果
和吸底效果
,經(jīng)常用在跟隨導(dǎo)航
、移動(dòng)廣告
和懸浮提示
等場(chǎng)景中。
原理
在 jQuery 時(shí)代就有很多吸附效果插件了,現(xiàn)在常用的三大前端框架也有自身第三方的吸附效果組件。它們都有著共通的實(shí)現(xiàn)原理:監(jiān)聽scroll
事件,判斷scrollTop
和目標(biāo)元素
的位置范圍,符合條件則將目標(biāo)元素
的position
聲明為fixed
,令目標(biāo)元素
相對(duì)于瀏覽器窗口進(jìn)行定位,讓用戶看上去就像釘在瀏覽器指定位置上。
javascript 實(shí)現(xiàn)吸附效果的代碼在網(wǎng)上一搜一大堆,更何況筆者喜歡耍 CSS ,在此就不貼相關(guān)的JS代碼
了。本文為各位同學(xué)推薦一個(gè)很少見很少用的 CSS 屬性:position:sticky
。簡(jiǎn)單的「兩行CSS核心代碼」就能完成「十多行JS核心代碼」的功能,何樂(lè)而不為呢。
實(shí)現(xiàn)
簡(jiǎn)單回顧position
常用的值,怎樣用就不說(shuō)了,各位同學(xué)應(yīng)該都熟透了。
取值 | 功能 | 版本 |
---|---|---|
「inherit」 | 繼承 |
2 |
「static」 | 標(biāo)準(zhǔn)流 |
2 |
「relative」 | 相對(duì)定位 |
2 |
「absolute」 | 絕對(duì)定位 |
2 |
「fixed」 | 固定定位 |
2 |
「sticky」 | 粘性定位 |
3 |
當(dāng)值為sticky
時(shí)將元素變成粘性定位
。「粘性定位」是相對(duì)定位
和固定定位
的合體,元素在特定閾值
跨越前為相對(duì)定位,跨越后為固定定位。
主要是為了推廣知識(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)這些元素在某些滾動(dòng)時(shí)刻處于相對(duì)定位,在特定滾動(dòng)時(shí)刻就處于固定定位
。
- 第1個(gè)
<li>
:top
為0px
,滾動(dòng)到容器頂部
就固定 - 第2個(gè)
<li>
:top
為40px
,滾動(dòng)到距離容器頂部40px
就固定 - 第3個(gè)
<li>
:沒(méi)有聲明top/bottom
,就一直保持相對(duì)定位 - 第4個(gè)
<li>
:bottom
為40px
,滾動(dòng)到距離容器底部40px
就固定 - 第5個(gè)
<li>
:bottom
為0px
,滾動(dòng)到容器底部
就固定
當(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)元素
就相對(duì)該祖先元素
進(jìn)行粘性定位
。
確認(rèn)參照物跟position:absolute
一致。
兼容
兼容性勉強(qiáng)還行,近2年發(fā)版的瀏覽器都能支持,Safari
和Firefox
的兼容性還是挺贊的。有吸附效果
需求的同學(xué)建議一試,要兼容IExplorer
就算了。
以上就是W3Cschool編程獅
關(guān)于純CSS實(shí)現(xiàn)吸附效果的相關(guān)介紹了,希望對(duì)大家有所幫助。