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

最新推荐文章于 2024-06-17 18:04:45 发布

weixin_34104341

最新推荐文章于 2024-06-17 18:04:45 发布

阅读量134

点赞数

原文链接：http://www.cnblogs.com/yuzhongyu/p/10517755.html

版权

　　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>