【H5】关于react移动端H5的滚动吸顶方案实践总结
方案一
采用position: sticky;的形式，其利用浏览器提供的api，实现原理是在吸顶时修改定位为fixed，反之则修改为releative
缺陷：此种方案一旦父元素滚动出可视区域，就会导致吸顶失效，滚动时会跟着父容器滚动出去（因此，仅适用于部分简单的吸顶场景）
方案二
采用NPM包去实现滚动吸顶效果，为此我实践了3种滚动三方包，分别是以下三种：
"react-sticky-box": "^2.0.5", // 可以实现滚动吸顶，但是过渡效果太突兀，突然就闪出来的那种，没有感觉顺滑，因此放弃
"react-sticky-el": "^2.1.1", // 这种我简单试了下，和position: sticky;基本一致，缺陷也是会导致滚动出去，但是没有深入去实践API，暂定为放弃的方案
"react-stickynode": "^4.1.1", // 经过实践，此种方案可以实现吸顶，使用方式便捷，且过渡较为顺滑，因此该方案被采用
方案三
自行通过js去实现，通过获取容器元素，监听滚动的时机，进行定位position值的修改，这类网上的方案很多，就不过多赘述，但需要注意的是，需要区分上滚动和下滚动的过渡效果（注意，并不是指上吸顶和下吸顶），并同时做处理，才能做到流畅顺滑。
原文地址：https://blog.csdn.net/hzxOnlineOk/article/details/142849306
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！