什么是 position: sticky 的效果,体验可以试试这里demo
效果看起很好,这用效果是有条件的——父元素是滚动调容器,子元素设置 position: sticky; 才有效,孙子辈的元素无效。
在移动端项目中,往往加下拉刷新和上拉刷新,需要吸顶的元素,不是是滚动调容器子元素。具体要怎么解决,如果想不到方案,我们可以直接参考已有实现的网站,这也是一种偷懒😂。
先看卡京东做法:
在看看淘宝的做法
不然发现,他们实现的原理:利用父元素 onscroll监听滚动高度,滚动高度到达吸顶的子元素,这时设置 postion: fixed。