前言：position:sticky是css定位新增屬性；可以說是相對定位relative和固定定位fixed的結合；它主要用在對scroll事件的監聽上；簡單來說，在滑動過程中，某個元素距離其父元素的距離達到sticky粘性定位的要求時(比如top：100px)；position:sticky這時的效果相當于fixed定位，固定到適當位置。
使用：
#sticky-nav {position: sticky;top: 100px;}設置position:sticky同時給一個(top,bottom,right,left)之一即可
使用條件：
1、父元素不能overflow:hidden或者overflow:auto屬性。
2、必須指定top、bottom、left、right4個值之一，否則只會處于相對定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素僅在其父元素內生效
例子：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">這是一個tab切換欄，給sticky定位top=100px</div> <p class="scroll-container">發生滾動</p> <p class="scroll-container" style="background:lightgoldenrodyellow;">發生滾動</p>
項目中遇到的坑：
先來看看各大內核對position:sticky的支持情況
問題描述：
在一個小程序開發項目中；tabs組件使用了粘性定位，其中有tab欄的切換；tab欄底部是大段列表內容list-container內容的展示；其中展示內容有click事件(或者說是touch事件);ios以及pc瀏覽器中對點擊的測試是正常的；但在安卓手機中！?。?！我的天，點擊穿透了?。〔⑶?，嘗試去掉list-container中的item的點擊跳轉，發現tab切換的點擊沒有了反應，事件消失了?。?！
設置斷點，查看事件流的走向：首先事件捕獲-->目標節點tab-->事件冒泡；這個泡居然冒到了container-list中的item。。。簡直噩夢大致的項目結構：
html結構：
<div class="service-wrap"> <tab>這是tab切換</tab> <div class="list-container"> <!--for循環有很多item--> <item></item> <item></item> </div> </div>
解決辦法：
1.在使用組件庫的tab時，外層套一個div，防止點擊穿透和不正常的事件流走向或者（一個治標不治本的方法，具體看業務場景）
2.組件庫的樣式無法改，sticky作為tab組件的行內樣式，因為我使用這個tab時是直接在viewpoint的頂部的，這是完全可以用fixed達到效果。我在調用類的外部設置了position:fixed !import；樣式最高優先級去覆蓋了組件庫中的定位樣式，就正常了。
一點想法：
position:sticky對安卓的兼容簡直讓人想哭，目前手機端的用戶非常多，要做到兼顧，由于安卓系統對sticky粘性定位的慘淡支持；如果業務場景可以用其它定位解決，那就還是不要用sticky吧。。。。留下心酸的淚水。。。。
ps：有別的解決方法，歡迎大家告知，謝謝。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
