sticky黏顶须知

如下设置让元素黏顶

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

---

sticky的使用条件

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

---

特性（坑）

1. sticky 不会触发 BFC。如果不知道 BFC 可以看这里。
2. 样式表 z－index 无效。行内 style 写有效。
3. sticky 是容器相关的，也就说 sticky 的特性只会在他所处的容器里生效。前往查看demo
   强调这一点是因为在实际使用中，碰到 body 设置 height: 100% 的时候 sticky 元素停在某一个位置不动了。

---

总结

使用sticky去完成黏顶的业务时，因为ios的支持度很高，但是大部分安卓手机不支持该属性，需要降级处理。可以通过监听scollTop去动态更新组件的定位（根据位置动态变化fix/absolute）
当有子元素有sticky时要慎重设置height: 100%以及overflow（会失效）