如何使用React.js实现上滚显示Navbar、下滚隐藏导航栏效果

核心思路是新增变量记录上一次的滚动位置，每次滚动时对比当前滚动位置和上次位置，判断滚动方向，再结合滚动距离阈值控制Header显隐。我们用useRef存储上一次滚动位置，避免频繁更新状态导致不必要的组件重渲染。

修改后的Navbar完整代码 #

import { useState, useEffect, useRef } from 'react';

const Navbar = () => {
  const [show, setShow] = useState(false);
  // 用useRef存储上一次滚动位置，不会触发组件重渲染
  const lastScrollY = useRef(0);

  const controlNavbar = () => {
    const currentScrollY = window.scrollY;
    
    // 滚动距离小于250px时始终显示Header，和原有逻辑保持一致
    if (currentScrollY <= 250) {
      setShow(false);
      lastScrollY.current = currentScrollY;
      return;
    }

    // 向下滚动：当前位置大于上次位置，隐藏Header
    if (currentScrollY > lastScrollY.current) {
      setShow(true);
    } 
    // 向上滚动：当前位置小于上次位置，显示Header
    else {
      setShow(false);
    }

    // 更新上次滚动位置记录
    lastScrollY.current = currentScrollY;
  };

  useEffect(() => {
    window.addEventListener('scroll', controlNavbar);
    return () => {
      window.removeEventListener('scroll', controlNavbar);
    };
  }, []);

  // 原有Header渲染逻辑无需修改
  return (
    <header className={`active ${show && 'hidden'}`}></header>
  );
};

额外说明 #

你原来的Header部分代码和CSS样式不需要做任何调整，可直接复用。
如果想避免页面微小滚动就触发Header显隐的抖动问题，可以给滚动差值加个阈值判断，比如只有滚动超过10px才切换状态，修改滚动方向判断逻辑即可：

// 向下滚动且差值超过10px才隐藏
if (currentScrollY - lastScrollY.current > 10) {
  setShow(true);
} 
// 向上滚动且差值超过10px才显示
else if (lastScrollY.current - currentScrollY > 10) {
  setShow(false);
}

内容的提问来源于stack exchange，提问作者Saeed Ghezel Arsalan