中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

CSS怎么實現吸附效果

發布時間:2022-02-22 16:08:01 來源:億速云 閱讀:212 作者:iii 欄目:開發技術

這篇文章主要講解了“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:stickytop/bottom:npx。上述Demo里5個節點都聲明了position:sticky,但由于top/bottom賦值有所不同就產生了不同的吸附效果。

細心的同學可能發現這些元素在某些滾動時刻處于相對定位,在特定滾動時刻就處于固定定位

  • 第1個<li>top0px,滾動到容器頂部就固定

  • 第2個<li>top40px,滾動到距離容器頂部40px就固定

  • 第3個<li>:沒有聲明top/bottom,就一直保持相對定位

  • 第4個<li>bottom40px,滾動到距離容器底部40px就固定

  • 第5個<li>bottom0px,滾動到容器底部就固定

當然,換成leftright也一樣能實現橫向的吸附效果

注意

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

目標元素的任意祖先元素都未聲明position:relative|absolute|fixed|sticky,才與position:fixed表現一致。

當離目標元素最近的祖先元素聲明了position:relative|absolute|fixed|sticky目標元素就相對該祖先元素進行粘性定位

確認參照物跟position:absolute一致。

兼容

兼容性勉強還行,近2年發版的瀏覽器都能支持,SafariFirefox的兼容性還是挺贊的。有吸附效果需求的同學建議一試,要兼容IExplorer就算了。

感謝各位的閱讀,以上就是“CSS怎么實現吸附效果”的內容了,經過本文的學習后,相信大家對CSS怎么實現吸附效果這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關知識點的文章,歡迎關注!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

css
AI

盘锦市| 汉沽区| 凤庆县| 永胜县| 永安市| 陈巴尔虎旗| 上蔡县| 屏东市| 高安市| 通江县| 翁牛特旗| 石柱| 云和县| 西平县| 衡阳市| 盐池县| 乾安县| 临高县| 普洱| 金川县| 贡觉县| 湟中县| 黄龙县| 石屏县| 长汀县| 武义县| 林西县| 景泰县| 河北区| 沅陵县| 宝应县| 区。| 安达市| 类乌齐县| 郓城县| 华亭县| 沾化县| 井研县| 陈巴尔虎旗| 合江县| 东光县|