粘性定位 sticky
相当于相对定位 relative
和固定定位 fixed
的结合;在页面元素滚动过程中,某个元素距离其父元素的距离达到 sticky
粘性定位的要求时;元素的相对定位 relative
效果变成固定定位 fixed
的效果。
例如我们常用的表格的表头即将滚出可视区时吸附在顶部等
它是有使用条件的:
1、父元素不能overflow:hidden
或者 overflow:auto
属性
2、必须指定 top
、bottom
、left
、right
4 个值之一,否则只会处于相对定位
3、父元素的高度不能低于 sticky
元素的高度
4、sticky
元素仅在其父元素内生效
在需要滚动吸顶的元素加上以下样式便可以实现这个效果:
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
这个属性的兼容性并不是很好,因为这个 API 还只是实验性的属性。不过这个 API 在 IOS 系统的兼容性还是比较好的。
正文结束
Ctrl + Enter