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你能正常运行，说明当前浏览器是支持的)

　　兼容性一览：

111111

没错，我就是sticky，请向上滚动

2222222

3333333

444444444

55555555555

 

1  2      3      4         
      5         
      6         
      7          8         11     12 13     
     
      111111
     
14     
     
      没错，我就是sticky
     
15     
     
      2222222
     
16     
     
      3333333
     
17     
     
      444444444
     
18     
     
      55555555555
     
19 20