javascript - 在 ReactJS 中隐藏或显示导航栏？

Question

我想知道如何根据网页位置更改导航栏行为。我看过很多关于如何在滚动上隐藏/显示导航栏的教程，vie 成功实现了这些教程，但这似乎只涵盖了两种状态。我希望我的导航栏有三个:向上滚动时显示，向下滚动时隐藏，以及在网站顶部时更改不透明度。我尝试过使用各种 useEffects 和事件监听器，但我对 React 和 js 还很陌生。

这是我正在寻找的效果的一个很好的例子 https://brittanychiang.com/ 。正如您所看到的，一旦您位于网页顶部，不透明度以及阴影都会发生变化，当您向上/向下滚动时，一切似乎都“卡在”顶部，而不是 float 的外观。使用开发工具，我发现导航栏类似乎具有三个不同的名称，具体取决于滚动条的位置。

提前致谢!

Answer 1

在useEffect中使用空白数组在安装时运行一次

然后使用一个状态从窗口滚动事件设置为(上、下、上)

working demo

js

export function headerSystem(){
    const [hState,sethState] = useState("top")

    useEffect(()=>{
        var lastVal = 0
        window.onscroll = function(){
            let y = window.scrollY
            if(y > lastVal){sethState("down")}
            if(y < lastVal) {sethState("up")}
            if(y === 0) {sethState("top")}
            lastVal = y
        }        
    },[])

    return (     
        <div className="root">
            <div className={"header text-center p-4 bg-blue-200 fixed w-full text-lg font-semibold " + hState}>this is header</div>
            <div className="pageContent bg-green-500">
                <div className="each h-screen"></div>
                <div className="each h-screen"></div>
                <div className="each h-screen"></div>
                <div className="each h-screen"></div>
                <div className="each h-screen"></div>
            </div>
        </div>
    )
}

CSS

  .header {
    background: rgba(0, 0, 0, 0);
    transition: all 0.3s ease;
  }

  .top {
    top: 0px;
  }

  .down {
    top: -80px;
  }

  .up {
    top: 0px;
  }

  .up,
  .down {
    background: rgba(0, 255, 242, 0.363);
    box-shadow: 0px 0px 5px black;
    padding: 8px;
  }