杜郎俊赏 - dujun.io

position: sticky

刷到蜻蜓的墓园的博客,时光页面的年月用了元素固定。

我注意到滑动时固定和释放很顺滑,没有拖帧,而这是我的时光页面一直没解决的问题。

当时是参考jquery.pin改写的 js,没错,是jQuery 时代的方法了,原理就是根据可视范围,切换 position 为 fixed、absolute。慢速滑动时效果是完美的,但是快速滑动时就会有拖帧。

我研究了蜻蜓的墓园源码,发现是用 css 新特性 “position: sticky”。改完之后果然顺滑了。实际效果见时光页面

改的过程中遇到个坑,“position: sticky” 的所有祖先元素不能有 “overflow: hidden” 类似属性,否则不生效。

标签: 开发 前端
日期:2022-02-05