详解CSS粘性精准定位 sticky

序言：

position:sticky是css精准定位新增特性；

能够说是static（沒有精准定位） 和 固定不动精准定位fixed 的融合；

它关键用在对 scroll 恶性事件的监视上；简易来讲，在拖动全过程中，某个元素间距其父元素的间距做到 sticky 粘性精准定位的规定时(例如top：100px)；

position:sticky这时候的实际效果非常于fixed精准定位，固定不动到适度部位

讲 sticky 精准定位以前，我先说1下position 的别的精准定位，

absolute： 转化成肯定精准定位的元素，相对 static 精准定位之外的第1个父元素开展精准定位。元素的

部位根据"left", "top", "right" 和 "bottom" 特性开展要求。

fixed： 转化成固定不动精准定位的元素，相对访问器对话框开展精准定位（老IE不适用），元素的部位通

过"left", "top", "right" 和 "bottom" 特性开展要求。

relative： 转化成相对性精准定位的元素，相对其一切正常部位开展精准定位，不摆脱文本文档流。

static：

默认设置值，沒有精准定位，元素出現在一切正常的文本文档流中（忽视 top, bottom, left, right 或

z-index 申明）。inherit要求应当从父元素承继 position 特性的值。

1. sticky的应用：
 

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

设定 position:sticky 另外给1个 (top,bottom,right,left) 之1便可 

应用标准：

1. 父元素不可以overflow:hidden或overflow:auto特性。 
2. 务必特定top、bottom、left、right4个值之1，不然只会处在相对性精准定位 
3. 父元素的高宽比不可以低于sticky元素的高宽比 
4. sticky元素仅在其父元素内起效 
    

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">这是1个tab切换栏，给sticky精准定位top=100px</div>
<p class="scroll-container">产生翻转</p>
<p class="scroll-container" style="background: lightgoldenrodyellow;">产生翻转</p>

实际效果： 

动态性的实际效果大伙儿自主拷贝编码查询。

3. 各大核心对position:sticky的适用状况
 

4. 新项目中的坑：
 

难题叙述：

在1个小程序流程开发设计新项目中；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>

处理方法： 

在应用组件库的tab时，外层套1个div，避免点一下穿透和不一切正常的恶性事件流走向 或（1个治标不治本的方式，实际看业务流程情景） 
.组件库的款式没法改，sticky做为tab组件的行内款式，由于我应用这个tab时是立即在viewpoint的顶部的，这是彻底能够用fixed做到实际效果。我在启用类的外界设定了position:fixed !import；款式最高优先选择级去遮盖了组件库中的精准定位款式，就一切正常了。 
 

1点念头： position:sticky对安卓系统的适配真是令人想哭，现阶段手机上端客户十分多，要保证兼具，因为安卓系统系统软件对sticky粘性精准定位的萧条适用；假如业务流程情景能够用其它精准定位处理，那就還是不必用sticky吧。。。。留下辛酸的泪水。。。。 
 

总结

以上所述是网编给大伙儿详细介绍的CSS粘性精准定位 sticky ，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑欢迎给我留言，网编会立即回应大伙儿的！