如何在React中滚动时突出显示导航栏？

useEffect(() => {
  const handleScroll = () => {
    const currentPosition = window.pageYOffset || document.documentElement.scrollTop;
    setScrollPosition(currentPosition);
  };

  window.addEventListener("scroll", handleScroll);

  return () => {
    window.removeEventListener("scroll", handleScroll);
  };
}, []);

const navHeight = // 导航栏的高度
const isNavSticky = scrollPosition > navHeight;

// 假设导航栏的CSS类名为"navbar"
const navClassName = isNavSticky ? "navbar sticky" : "navbar";

// 在组件的JSX中应用导航栏的CSS类名
return (
  <nav className={navClassName}>
    {/* 导航栏内容 */}
  </nav>
);