详解CSS粘性精准定位 sticky

日期:2021-01-20 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

序言:

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 ,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑欢迎给我留言,网编会立即回应大伙儿的!