Sticky:CSS 粘性布局

请注意,本文编写于 261 天前,最后修改于 261 天前,其中某些信息可能已经过时。

最近发现了一个不错的 CSS 属性:position:sticky,这个尚处于实验阶段的属性可以很好的解决网页中边栏随滚动固定的问题。

先看一个 Demo,在上下滚动过程中注意右侧红色块的行为:

这就是 position: sticky 的作用。以下部分摘选自 MDN Position

盒位置根据正常流计算(这称为正常流动中的位置),然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位。在所有情况下(即便被定位元素为 table 时),该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时,后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky table 元素的效果与 position: relative 相同。

因此,应用这个属性并不会破坏网页原有布局,super cool。

应用时,除了指定 position: sticky 外还必须指定 topbottomrightleft 中至少一个作为阈值,当元素距离 viewport 边缘的距离达到这个阈值时就会触发黏性布局。

兼容性:

兼容性,2019-03-03
兼容性,2019-03-03

emmm,如果不是生产环境,还是可以玩玩的。另外有开源库可以稍稍提升一下这个属性的兼容性:filamentgroup/fixed-sticky,但是这个项目已经 Archive 了。

添加新评论

本站现已启用评论投票,被点踩过多的评论将自动折叠。与本文无关评论请发留言板。请不要水评论,谢谢。

已有 11 条评论

大佬,求一份源码,github那个我下载了用不了啊,样式有问题

仔细读说明。

阁下的typecho VOID主题有个每刷新一次就会在顶部大图出现个一句话小提示的小功能,请问是由哪段代码控制的呢,有的站不太需要这个小功能呢:)

高级设置中有对应的选项

很早之前就更换域名了 但是没有通知贵站 现在麻烦大佬把旧站链接 https://qyweb.tech/更换为https://www.icolin.cn/ 感谢哈

很棒的属性,我一个js小白再也不用烦文章目录了

我貌似又重复评论了,还把邮箱输错了,还还没抢到沙发

大佬的操作