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>
来源:oschina
链接:https://my.oschina.net/u/4349041/blog/3616707