sticky -- position定位属性sticky值之粘性定位;

痞子三分冷 提交于 2020-12-17 04:53:39

  sticky简述

sticky 是css定为新增的属性;可以说是相对定位relative和固定定位fixed的结合;
它主要用在对scroll事件的监听上,简单说在滑动过程中,某个元素的距离其父元素的距离达到 sticky 粘性定位 要求时;
position:sticky 这时的效果就相对于 fixed 定位,固定到适当的位置。
使用条件:

    1. 父元素不能设置 overflow:hidden; 或者 overflow:auto;  属性;
    2. 必须制定 top、bottom 、left 、 right 4个值之一,否则只会处于相对定位;
    3. 父元素的高度不能低于sticky 元素的高度;
    4. sticky 元素仅在其父元素内生效;
基本使用示例 : (如果下面这个demo你能正常运行,说明当前浏览器是支持的)

  兼容性一览:https://caniuse.com/#feat=css-sticky

111111
没错,我就是sticky,请向上滚动
2222222
3333333
444444444
55555555555

 

 1 <!DOCTYPE html>
 2     <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6         <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7         <title>Document</title>
 8         <style>
 9             *{margin: 0;padding: 0;}
10         </style>
11     </head>
12 <body>
13     <div style="height:300px;background:skyblue;">111111</div>
14     <div style="position:sticky;top:0px;height:30px;background:pink;">没错,我就是sticky</div>
15     <div style="height:300px;background:skyblue;">2222222</div>
16     <div style="height:300px;background:skyblue;">3333333</div>
17     <div style="height:300px;background:skyblue;">444444444</div>
18     <div style="height:300px;background:skyblue;">55555555555</div>
19 </body>
20 </html>

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!