詳解css粘性定位position：sticky問題采坑

發(fā)布時(shí)間：2019-08-26 14:58:24 作者：小bearBear

這篇文章主要介紹了詳解css粘性定位position：sticky問題采坑的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言：position:sticky是css定位新增屬性；可以說是相對(duì)定位relative和固定定位fixed的結(jié)合；它主要用在對(duì)scroll事件的監(jiān)聽上；簡單來說，在滑動(dòng)過程中，某個(gè)元素距離其父元素的距離達(dá)到sticky粘性定位的要求時(shí)(比如top：100px)；position:sticky這時(shí)的效果相當(dāng)于fixed定位，固定到適當(dāng)位置。

使用：

#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%
        }
        
        h1 {
            height: 200px;
            position: relative;
            background-color: lightblue;
        }
        
        h1: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代碼：

<h1>高200px;距頂部100px</h1>
    <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)目中遇到的坑：

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

問題描述：

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

設(shè)置斷點(diǎn)，查看事件流的走向：首先事件捕獲-->目標(biāo)節(jié)點(diǎn)tab-->事件冒泡；這個(gè)泡居然冒到了container-list中的item。。。簡直噩夢大致的項(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.在使用組件庫的tab時(shí)，外層套一個(gè)div，防止點(diǎn)擊穿透和不正常的事件流走向或者（一個(gè)治標(biāo)不治本的方法，具體看業(yè)務(wù)場景）

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

一點(diǎn)想法：

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

ps：有別的解決方法，歡迎大家告知，謝謝。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。