position: sticky
刷到蜻蜓的墓园的博客,时光页面的年月用了元素固定。
我注意到滑动时固定和释放很顺滑,没有拖帧,而这是我的时光页面一直没解决的问题。
当时是参考jquery.pin改写的 js,没错,是jQuery 时代的方法了,原理就是根据可视范围,切换 position 为 fixed、absolute。慢速滑动时效果是完美的,但是快速滑动时就会有拖帧。
我研究了蜻蜓的墓园源码,发现是用 css 新特性 “position: sticky”。改完之后果然顺滑了。实际效果见时光页面
改的过程中遇到个坑,“position: sticky” 的所有祖先元素不能有 “overflow: hidden” 类似属性,否则不生效。