前言：

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

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

它主要用在對 scroll 事件的監(jiān)聽上；簡單來說，在滑動過程中，某個元素距離其父元素的距離達到 sticky 粘性定位的要求時(比如top：100px)；

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

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

absolute： 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的

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

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

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

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

static：

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

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

1. sticky的使用：
 

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

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

使用條件：

1. 父元素不能overflow:hidden或者overflow:auto屬性。 
2. 必須指定top、bottom、left、right4個值之一，否則只會處于相對定位 
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">這是一個tab切換欄，給sticky定位top=100px</div>
<p class="scroll-container">發(fā)生滾動</p>
<p class="scroll-container" style="background: lightgoldenrodyellow;">發(fā)生滾動</p>

效果： 

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

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

4. 項目中的坑：
 

問題描述：

在一個小程序開發(fā)項目中；tabs組件使用了粘性定位，其中有tab欄的切換；tab欄底部是大段列表內(nèi)容list-container內(nèi)容的展示；其中展示內(nèi)容有click事件(或者說是touch事件);ios以及pc瀏覽器中對點擊的測試是正常的；但在安卓手機中?。。。∥业奶?，點擊穿透了！！并且，嘗試去掉list-container中的item的點擊跳轉(zhuǎn)，發(fā)現(xiàn)tab切換的點擊沒有了反應(yīng)，事件消失了?。?！ 設(shè)置斷點，查看事件流的走向：首先事件捕獲-->目標(biāo)節(jié)點tab-->事件冒泡；這個泡居然冒到了container-list中的item。。。簡直噩夢 大致的項目結(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>

解決辦法： 

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

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

總結(jié)

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

最新評論