css粘性定位position：sticky的示例分析

這篇文章給大家分享的是有關(guān)css粘性定位position：sticky的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

使用：

#sticky-nav {
position: sticky;
top: 100px;
}

設(shè)置position:sticky同時(shí)給一個(gè)(top,bottom,right,left)之一即可

使用條件：

1、父元素不能overflow:hidden或者overflow:auto屬性。

2、必須指定top、bottom、left、right4個(gè)值之一，否則只會(huì)處于相對(duì)定位

3、父元素的高度不能低于sticky元素的高度

4、sticky元素僅在其父元素內(nèi)生效

例子：css代碼：

* {
            margin: 0;
            padding: 0
        }
        
        html body {
            height: 100vh;
            width: 100%
        }
        
        h2 {
            height: 200px;
            position: relative;
            background-color: lightblue;
        }
        
        h2:after {
            content: '';
            position: absolute;
            top: 100px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: red;
        }
        
        #sticky-nav {
            position: sticky;
            /*position: absolute;*
            left: 0;*/
            top: 100px;
            width: 100%;
            height: 80px;
            background-color: yellowgreen;
        }
        
        .scroll-container {
            height: 600px;
            width: 100%;
            background-color: lightgrey;
        }

html代碼：

<h2>高200px;距頂部100px</h2>
    <div id="sticky-nav">這是一個(gè)tab切換欄，給sticky定位top=100px</div>
    <p class="scroll-container">發(fā)生滾動(dòng)</p>
    <p class="scroll-container" style="background:lightgoldenrodyellow;">發(fā)生滾動(dòng)</p>

項(xiàng)目中遇到的坑：

先來(lái)看看各大內(nèi)核對(duì)position:sticky的支持情況

問(wèn)題描述：

在一個(gè)小程序開發(fā)項(xiàng)目中；tabs組件使用了粘性定位，其中有tab欄的切換；tab欄底部是大段列表內(nèi)容list-container內(nèi)容的展示；其中展示內(nèi)容有click事件(或者說(shuō)是touch事件);ios以及pc瀏覽器中對(duì)點(diǎn)擊的測(cè)試是正常的；但在安卓手機(jī)中?。。?！我的天，點(diǎn)擊穿透了??！并且，嘗試去掉list-container中的item的點(diǎn)擊跳轉(zhuǎn)，發(fā)現(xiàn)tab切換的點(diǎn)擊沒有了反應(yīng)，事件消失了！?。?/p>

設(shè)置斷點(diǎn)，查看事件流的走向：首先事件捕獲-->目標(biāo)節(jié)點(diǎn)tab-->事件冒泡；這個(gè)泡居然冒到了container-list中的item。。。簡(jiǎn)直噩夢(mèng)大致的項(xiàng)目結(jié)構(gòu)：

html結(jié)構(gòu)：

<div class="service-wrap">
        <tab>這是tab切換</tab>
        <div class="list-container">
            <!--for循環(huán)有很多item-->
            <item></item>
            <item></item>
        </div>
    </div>

解決辦法：

1.在使用組件庫(kù)的tab時(shí)，外層套一個(gè)div，防止點(diǎn)擊穿透和不正常的事件流走向或者（一個(gè)治標(biāo)不治本的方法，具體看業(yè)務(wù)場(chǎng)景）

2.組件庫(kù)的樣式無(wú)法改，sticky作為tab組件的行內(nèi)樣式，因?yàn)槲沂褂眠@個(gè)tab時(shí)是直接在viewpoint的頂部的，這是完全可以用fixed達(dá)到效果。我在調(diào)用類的外部設(shè)置了position:fixed !import；樣式最高優(yōu)先級(jí)去覆蓋了組件庫(kù)中的定位樣式，就正常了。

一點(diǎn)想法：

position:sticky對(duì)安卓的兼容簡(jiǎn)直讓人想哭，目前手機(jī)端的用戶非常多，要做到兼顧，由于安卓系統(tǒng)對(duì)sticky粘性定位的慘淡支持；如果業(yè)務(wù)場(chǎng)景可以用其它定位解決，那就還是不要用sticky吧。

感謝各位的閱讀！關(guān)于“css粘性定位position：sticky的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！