position:sticky的用法

基本用法

position:sticky，它是相对定位（position:relative）和固定定位（position:fixed）的混合。

使用它，我们不再用监听scroll事件，即可实现导航栏滚动绝对定位的效果。

.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

生效条件

需要注意的是，使用该属性有几个必要条件，否则不会生效：

• 父元素不能overflow:hidden或者overflow:auto属性。
• 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
• 父元素的高度不能低于sticky元素的高度
• sticky元素仅在其父元素内生效