【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值的修改，这类网上的方案很多，就不过多赘述，但需要注意的是，需要区分上滚动和下滚动的过渡效果（注意，并不是指上吸顶和下吸顶），并同时做处理，才能做到流畅顺滑。