React - 如何根据滚动移动元素?

时间:2017-09-20 00:50:12

标签: javascript reactjs animation

我想要做的是在Javascript / jQuery中非常简单,但是当你把React放在混合中时,我很困惑,因为我正试图以“React”的方式做事。所以场景是我有一个高约300px的div,里面有Element A.我想要做的是:

  • 检测整个文档的滚动
  • 当scrollTop到达父级位置时,开始向下移动元素A
  • 当scrollTop超过元素A的父级底部时,停止移动元素
  • 滚动时反之亦然

我尝试在父级上执行普通position: relative,然后在元素A上执行position: absolute,然后使用componentDidMount中的滚动事件进行计算,但事情变得不稳定且没有感觉很对。

有人在React做过这个吗?

1 个答案:

答案 0 :(得分:0)

Per @ Dekel上面的评论,(快速)回答是使用可以在NPM注册表中找到的react-sticky

https://www.npmjs.com/package/react-sticky