博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
涨知识啦:css粘性定位position:sticky
阅读量:4094 次
发布时间:2019-05-25

本文共 381 字,大约阅读时间需要 1 分钟。

最近学习了一个新的 css 属性:position:sticky。在开发中还是蛮实用的,记录下来,分享给需要的小伙伴。

知识点

position: sticky; 基于用户的滚动位置来定位。

它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。

需要注意的是想用它,必须要设置一个方向值(top, left, right, bottom)

场景描述

我写了一个表格,但是表格的数据比较多,当滚动到下边的时候往往不知道该列代表什么了,这时候粘性定位就发挥作用了。

在这里插入图片描述使用粘性定位后的效果:
在这里插入图片描述

代码示例

.th_wrap{  position:sticky;  top: 0px;}

就是简单的两个属性就可以实现啦。

转载地址:http://lovii.baihongyu.com/

你可能感兴趣的文章
影响科学圈的那些计算机代码
查看>>
乐视视频 App 图标改为“欠 122 亿”,网友:我在别家分红包,却在你家随份子!...
查看>>
乔布斯18岁求职信拍卖价22.24万美元,值吗?
查看>>
为何程序员总喜欢写技术博客,看完恍然大悟...
查看>>
假如计算机是中国人发明的,那代码应该这么写
查看>>
科技公司最爱的 50 款开源工具,你都用过吗?
查看>>
触目惊心:比特币到底消耗了多少能源?
查看>>
面试官:简历上敢写技术精通?那我就不客气了!
查看>>
如何判断一家互联网公司要倒闭了?
查看>>
想快速上手机器学习?来看下这个 GitHub 项目!
查看>>
GitHub 标星 3.6k,一本开源的深度学习中文教程!
查看>>
9 款你不能错过的 JSON 工具
查看>>
就在昨天,全球 42 亿 IPv4 地址宣告耗尽!
查看>>
200页!分享珍藏很久的Python学习知识手册(附链接)
查看>>
程序员之神
查看>>
4 岁小女孩给 Linux 内核贡献提交
查看>>
推荐几个私藏很久的技术公众号给大家
查看>>
20 个 2020 年软件开发趋势预测
查看>>
王垠受邀面试阿里 P9,被 P10 面跪后网上怒发文,惨打 325 的 P10 赵海平回应了!...
查看>>
Python 趣味打怪:147 段简单代码助你从入门到大师
查看>>