粘性定位sticky的使⽤场景——CSS使⽤场景
粘性定位 sticky 相当于相对定位 relative 和固定定位 fixed 的结合；在页⾯元素滚动过程中，某个元素距离其⽗元素的距离达到 sticky 粘性定位的要求时；元素的相对定位 relative 效果变成固定定位 fixed 的效果。
例如我们常⽤的表格的表头即将滚出可视区时吸附在顶部等
它是有使⽤条件的：
⽗元素不能 overflow:hidden 或者 overflow:auto 属性
必须指定 top、bottom、left、right 4 个值之⼀，否则只会处于相对定位
⽗元素的⾼度不能低于 sticky 元素的⾼度
sticky 元素仅在其⽗元素内⽣效
在需要滚动吸顶的元素加上以下样式便可以实现这个效果：css固定定位
.sticky {
position:-webkit-sticky;
position: sticky;
top:0;
}
这个属性的兼容性并不是很好，因为这个 API 还只是实验性的属性。不过这个 API 在 IOS 系统的兼容性还是⽐较好的。
所以使⽤的时候要谨慎，可以结合来使⽤～

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。