Reactjs 如何根据滚动位置在React应用程序中触发动画

假设当用户滚动过站点的标题时，我需要向导航栏添加一个元素。如果不使用jQuery，如何在React中执行类似操作？

您可以执行类似操作：（此函数是从我以前创建的React-sticky动态头复制的：）

您可以尝试安装my library，看看它是否可以扩展您的需要：

---

如果有错误，请随时在此处发布，谢谢添加eventlistener并重新发布。我可以用这个做我想做的。谢谢很高兴你让它工作了，对于与React相关的更多问题，请随时问我，如果我能帮忙，我会尽力的^^当然我会的！谢谢

componentDidMount() {
    var h1 = parseInt(this.refs.header.offsetHeight);
    window.addEventListener('scroll', this._calcScroll.bind(this, h1));
}

componentWillUnmount() {
    window.removeEventListener('scroll', this._calcScroll)
}

_calcScroll(h1) {
    var _window = window;
    var heightDiff = parseInt(h1);
    var scrollPos = _window.scrollY;
    if (scrollPos > heightDiff) {
        // here this means user has scrolled past your header, 
        // you may rerender by setting State or do whatever
        this.setState({
            //stateKey: stateValue,
        });
    } else {
        // here the user has scrolled back to header's territory, 
        // it's optional here for you to remove the element on navbar as stated in the question or not
        this.setState({
            //stateKey: stateValue,
        });
    }
}

render() {
  return (
    <div ref="header">YOUR HEADER HERE</div>
  );
}

#your-element{
  transition: opacity 0.3s ease-in;
}