javascript - 如何在滚动时替换项目？

Question

滚动页面时我需要更改导航栏。如何捕获改变的时机？根据React的概念，如何正确地做到这一点？据我所知，使用 getElementById 是不是很糟糕？

const useState = React.useState
const useEffect = React.useEffect

const Component = () => {
    const [topNavbarHide, setTopNavbarHide] = useState(true);

    useEffect(() => {
        window.addEventListener('scroll', function () {
            let navbarSize = document.getElementById('navbar').offsetHeight;
            console.log("navbarSize " + navbarSize + "px");
            let scrollTop = document.documentElement.scrollTop;
            console.log("scrollTop " + scrollTop);
            if (scrollTop > navbarSize) {
                setTopNavbarHide(false)
            } else {
                setTopNavbarHide(true)
            }
            console.log(topNavbarHide);
        });
    });


    return (
        <div>
            <div id={"navbar"} className="navbar">
                <div
                    className={(topNavbarHide) ? "topNavbar" : "topNavbar hide"}>topNavbar
                </div>
                <div className="bottomNavbar">bottomNavbar</div>
            </div>
            <div className="box"></div>
            <div className="box1"></div>
            <div className="box2"></div>
            <div className="box"></div>
            <div className="box1"></div>
        </div>
    )

};


ReactDOM.render(
    <Component/>,
    document.getElementById('root')
);

https://codepen.io/slava4ka/pen/wvvGoBX

Answer 1

按照您当前正在执行的方式将事件监听器添加到 React hook 是完全可以的。您这样做的方式是正确的方式。