最近学习了一个新的 css 属性:position:sticky。在开发中还是蛮实用的,记录下来,分享给需要的小伙伴。
知识点
position: sticky; 基于用户的滚动位置来定位。
它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
需要注意的是想用它,必须要设置一个方向值(top, left, right, bottom)
场景描述
我写了一个表格,但是表格的数据比较多,当滚动到下边的时候往往不知道该列代表什么了,这时候粘性定位就发挥作用了。
使用粘性定位后的效果:
代码示例
.th_wrap{
position:sticky;
top: 0px;
}
就是简单的两个属性就可以实现啦。