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