前言：

position:sticky是css定位新增屬性；

可以說(shuō)是static（沒(méi)有定位） 和 固定定位fixed 的結(jié)合；

它主要用在對(duì) scroll 事件的監(jiān)聽(tīng)上；簡(jiǎn)單來(lái)說(shuō)，在滑動(dòng)過(guò)程中，某個(gè)元素距離其父元素的距離達(dá)到 sticky 粘性定位的要求時(shí)(比如top：100px)；

position:sticky這時(shí)的效果相當(dāng)于fixed定位，固定到適當(dāng)位置

講 sticky 定位之前，我先說(shuō)一下position 的其他定位，

absolute： 生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。元素的

位置通過(guò)"left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。

fixed： 生成固定定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位（老IE不支持），元素的位置通

過(guò)"left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。

relative： 生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位，不脫離文檔流。

static：

默認(rèn)值，沒(méi)有定位，元素出現(xiàn)在正常的文檔流中（忽略 top, bottom, left, right 或者

z-index 聲明）。inherit規(guī)定應(yīng)該從父元素繼承 position 屬性的值。

1. sticky的使用：
 

#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)生效 
    

2. 例子：
 

CSS代碼

<style>       
 *{       
     padding: 0;        
    margin: 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: relative; */ 
/* position: absolute; 
*/      
 top: 100px;        
   width: 100%;         
  height: 80px;           
background-color: yellowgreen;    
   }       
.scroll-container{        
   height: 600px;        
   width: 100%;          
 background-color: lightgrey;   
    }   
 </style>

HTML 代碼：

<h1>高100px，距離頂部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>

效果： 

動(dòng)態(tài)的效果大家自行復(fù)制代碼查看。

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

4. 項(xiàng)目中的坑：
 

問(wèn)題描述：

在一個(gè)小程序開(kāi)發(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)擊沒(méi)有了反應(yīng)，事件消失了?。。?設(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>

解決辦法： 

在使用組件庫(kù)的tab時(shí)，外層套一個(gè)div，防止點(diǎn)擊穿透和不正常的事件流走向 或者（一個(gè)治標(biāo)不治本的方法，具體看業(yè)務(wù)場(chǎng)景） 
.組件庫(kù)的樣式無(wú)法改，sticky作為tab組件的行內(nèi)樣式，因?yàn)槲沂褂眠@個(gè)tab時(shí)是直接在viewpoint的頂部的，這是完全可以用fixed達(dá)到效果。我在調(diào)用類(lèi)的外部設(shè)置了position:fixed !import；樣式最高優(yōu)先級(jí)去覆蓋了組件庫(kù)中的定位樣式，就正常了。 
 

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

總結(jié)

以上所述是小編給大家介紹的CSS粘性定位 sticky ，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

最新評(píng)論