您好,登錄后才能下訂單哦!
這篇文章主要講解了“CSS怎么實現(xiàn)吸附效果”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“CSS怎么實現(xiàn)吸附效果”吧!
在 jQuery 時代就有很多吸附效果插件了,現(xiàn)在常用的三大前端框架也有自身第三方的吸附效果組件。它們都有著共通的實現(xiàn)原理:監(jiān)聽scroll
事件,判斷scrollTop
和目標(biāo)元素
的位置范圍,符合條件則將目標(biāo)元素
的position
聲明為fixed
,令目標(biāo)元素
相對于瀏覽器窗口進行定位,讓用戶看上去就像釘在瀏覽器指定位置上。
javascript 實現(xiàn)吸附效果的代碼在網(wǎng)上一搜一大堆,更何況筆者喜歡耍 CSS ,在此就不貼相關(guān)的JS代碼
了。本文為各位同學(xué)推薦一個很少見很少用的 CSS 屬性:position:sticky
。簡單的「兩行CSS核心代碼」就能完成「十多行JS核心代碼」的功能,何樂而不為呢。
簡單回顧position
常用的值,怎樣用就不說了,各位同學(xué)應(yīng)該都熟透了。
取值 | 功能 | 版本 |
---|---|---|
「inherit」 | 繼承 | 2 |
「static」 | 標(biāo)準(zhǔn)流 | 2 |
「relative」 | 相對定位 | 2 |
「absolute」 | 絕對定位 | 2 |
「fixed」 | 固定定位 | 2 |
「sticky」 | 粘性定位 | 3 |
當(dāng)值為sticky
時將元素變成粘性定位
。「粘性定位」是相對定位
和固定定位
的合體,元素在特定閾值
跨越前為相對定位,跨越后為固定定位。
主要是為了推廣知識點,直接上代碼,樣式就不細(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個節(jié)點都聲明了position:sticky
,但由于top/bottom
賦值有所不同就產(chǎn)生了不同的吸附效果。
細(xì)心的同學(xué)可能發(fā)現(xiàn)這些元素在某些滾動時刻處于相對定位,在特定滾動時刻就處于固定定位
。
第1個<li>
:top
為0px
,滾動到容器頂部
就固定
第2個<li>
:top
為40px
,滾動到距離容器頂部40px
就固定
第3個<li>
:沒有聲明top/bottom
,就一直保持相對定位
第4個<li>
:bottom
為40px
,滾動到距離容器底部40px
就固定
第5個<li>
:bottom
為0px
,滾動到容器底部
就固定
當(dāng)然,換成left
和right
也一樣能實現(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)元素
就相對該祖先元素
進行粘性定位
。
確認(rèn)參照物跟position:absolute
一致。
兼容性勉強還行,近2年發(fā)版的瀏覽器都能支持,Safari
和Firefox
的兼容性還是挺贊的。有吸附效果
需求的同學(xué)建議一試,要兼容IExplorer
就算了。
感謝各位的閱讀,以上就是“CSS怎么實現(xiàn)吸附效果”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對CSS怎么實現(xiàn)吸附效果這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。