sticky簡述
sticky 是css定為新增的屬性；可以說是相對定位relative和固定定位fixed的結(jié)合；
它主要用在對scroll事件的監(jiān)聽上，簡單說在滑動過程中，某個元素的距離其父元素的距離達到 sticky 粘性定位 要求時；
position:sticky 這時的效果就相對于 fixed 定位，固定到適當?shù)奈恢谩?/p>
使用條件：
1\. 父元素不能設(shè)置 overflow:hidden; 或者 overflow:auto; 屬性；
2\. 必須制定 top、bottom 、left 、 right 4個值之一，否則只會處于相對定位；
3\. 父元素的高度不能低于sticky 元素的高度；
4\. sticky 元素僅在其父元素內(nèi)生效；
image.png
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>
