粘性定位 sticky的使用场景——CSS使用场景

粘性定位 sticky 相当于相对定位 relative 和固定定位 fixed 的结合；在页面元素滚动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位的要求时；元素的相对定位 relative 效果变成固定定位 fixed 的效果。

例如我们常用的表格的表头即将滚出可视区时吸附在顶部等

它是有使用条件的：

父元素不能 overflow:hidden 或者 overflow:auto 属性

必须指定 top、bottom、left、right 4 个值之一，否则只会处于相对定位

父元素的高度不能低于 sticky 元素的高度

sticky 元素仅在其父元素内生效

在需要滚动吸顶的元素加上以下样式便可以实现这个效果：

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

这个属性的兼容性并不是很好，因为这个 API 还只是实验性的属性。不过这个 API 在 IOS 系统的兼容性还是比较好的。

所以使用的时候要谨慎，可以结合一些其他的吸顶方式，也是这篇文章的参考来使用～