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>