如何在Next.js中使用useEffect实现滚动时头部固定？

你的代码存在两个核心问题，导致效果无法生效：

1. useEffect仅执行一次，未监听滚动事件
   空依赖数组[]会让useEffect只在组件挂载时运行一次，之后不会响应页面滚动动作，自然无法根据滚动状态更新头部定位。

2. 定位逻辑完全搞反
   你当前的逻辑是滚动后将头部设为absolute，但实际需求是滚动到指定位置后头部变为fixed固定在顶部。

修正后的完整代码如下：

import { useState, useEffect } from 'react';

export function MainNav({}: React.HTMLAttributes<HTMLElement>) {
  const [isScrolled, setIsScrolled] = useState(false);

  // 根据滚动状态切换定位类
  const headerPosition = isScrolled ? 'fixed top-0 left-0' : 'absolute';

  useEffect(() => {
    // 定义滚动处理函数
    const handleScroll = () => {
      // 滚动距离超过50px时更新状态
      setIsScrolled(window.pageYOffset >= 50);
    };

    // 给window添加滚动事件监听
    window.addEventListener('scroll', handleScroll);

    // 组件卸载时移除监听，避免内存泄漏
    return () => window.removeEventListener('scroll', handleScroll);
  }, []); // 空依赖确保监听只在挂载/卸载时执行一次

  return (
    <header className={`z-50 bg-white bg-opacity-80 shadow-sm backdrop-blur-sm w-full ${headerPosition}`}>
      {/* 导航栏内容 */}
    </header>
  );
}

关键细节说明：

• 通过window.addEventListener('scroll', handleScroll)监听滚动事件，每次滚动都会触发状态更新
• 组件卸载时移除监听，避免无用事件占用内存
• 修正定位逻辑：滚动后应用fixed top-0 left-0确保头部固定在视口顶部，未滚动时保持absolute
• 用isScrolled作为状态变量，语义更直观清晰

内容的提问来源于stack exchange，提问作者user824624