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>