在 ReactJS 中隐藏或显示导航栏？答案

【问题标题】：Hide or show navbar in ReactJS?在 ReactJS 中隐藏或显示导航栏？
【发布时间】：2022-02-12 22:06:40
【问题描述】：

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

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

提前致谢！

【问题讨论】：

标签： javascript html reactjs user-interface navbar

【解决方案1】：

您必须使用组件的生命周期函数来处理“滚动”事件。

请为您的标头组件找到此示例。通过一些调整，您也许可以使用它。

类组件：

componentDidMount: function() {
    window.addEventListener('scroll', this.handleScroll);
},

componentWillUnmount: function() {
    window.removeEventListener('scroll', this.handleScroll);
},

handleScroll: function(event) {
    let scrollTop = event.srcElement.body.scrollTop,
        itemTranslate = Math.min(0, scrollTop/3 - 60);

    this.setState({
      transform: itemTranslate // and use this on your header
    });
},

功能组件：

const [headerPosition, setHeaderPosition] = useState(0)

const handleScroll = useCallback((event) => {
     let scrollTop = event.srcElement.body.scrollTop,
     itemTranslate = Math.min(0, scrollTop/3 - 60);
        
     setHeaderPosition({
        transform: itemTranslate // and use this on your header
     });
}, [setHeaderPosition])
    
useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
}, [handleScroll])

【讨论】：

【解决方案2】：

在挂载时使用useEffect 中的空白数组运行一次

然后使用一个state 从窗口滚动事件中设置为 (top,down,up)

working demo

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;
  }

【讨论】：