实现 position: sticky 的效果

2,274 阅读1分钟

什么是 position: sticky 的效果,体验可以试试这里demo

效果看起很好,这用效果是有条件的——父元素是滚动调容器,子元素设置 position: sticky; 才有效,孙子辈的元素无效。

在移动端项目中,往往加下拉刷新和上拉刷新,需要吸顶的元素,不是是滚动调容器子元素。具体要怎么解决,如果想不到方案,我们可以直接参考已有实现的网站,这也是一种偷懒😂。

先看卡京东做法:

在看看淘宝的做法

不然发现,他们实现的原理:利用父元素 onscroll监听滚动高度,滚动高度到达吸顶的子元素,这时设置 postion: fixed。