如何在滚动条上显示 React 组件

Question

我已经为固定导航创建了一个 React 组件，我希望它保持隐藏状态，直到我滚动到页面上的某个点，然后滑入视图。 Medium 有一个类似于我所描述的标题。

这是 jQuery 中的一项相对微不足道的任务，使用 scrollmagic 或 waypoints，但是是否有一种惯用的方法可以使用 React 和 vanilla JS 来完成此任务？

原文由 Wilhelm 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

React Way with vanilla JS jsfiddle ；

不要忘记删除 EventListener。在此示例中，组件将在必要时呈现

class TopBar extends React.Component {
    state = { isHide: false };

    hideBar = () => {
       const { isHide } = this.state

       window.scrollY > this.prev ?
       !isHide && this.setState({ isHide: true })
       :
       isHide && this.setState({ isHide: false });

       this.prev = window.scrollY;
    }

    componentDidMount(){
        window.addEventListener('scroll', this.hideBar);
    }

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

    render(){
        const classHide = this.state.isHide ? 'hide' : '';
        return <div className={`topbar ${classHide}`}>topbar</div>;
    }
}

原文由 Kokovin Vladislav 发布，翻译遵循 CC BY-SA 4.0 许可协议