Next.js：页面重载时如何恢复粘性头部滚动状态

你的问题核心是：代码仅通过scroll事件触发头部状态更新，但页面重载时，即便当前滚动位置已经超过54px，scroll事件不会自动执行，导致isSticky始终保持初始的false状态，必须手动滚动才能触发状态切换。

修复方案 #

在useSSRLayoutEffect中，除了绑定滚动监听，立即执行一次滚动位置判断逻辑，让组件初始化时就根据当前页面的滚动状态设置正确的isSticky值；同时记得添加监听清理函数，避免内存泄漏。

修改后的完整代码：

const Header = () => {
  const [isSticky, setSticky] = useState(false)

  useSSRLayoutEffect(() => {
    // 抽离滚动判断逻辑为独立函数
    const checkScrollPosition = () => {
      setSticky(window.pageYOffset > 54)
    }

    // 初始化时立即执行，匹配当前滚动位置
    checkScrollPosition()

    // 绑定滚动监听事件
    window.addEventListener('scroll', checkScrollPosition, { passive: true })

    // 组件卸载时清理监听，防止内存泄漏
    return () => {
      window.removeEventListener('scroll', checkScrollPosition)
    }
  }, [])

  return (
    <>
      <header
        className={cx(
          'fixed top-0 z-10 flex w-full flex-col items-center justify-center transition-all',
          isSticky
            ? 'bg-black bg-opacity-60 backdrop-blur'
            : 'bg-transparent pt-4'
        )}
      >
        ...
      </header>
    </>
  )
}

export default Header

关键说明 #

• 将滚动判断逻辑抽成独立函数，既可以在初始化时调用，也能作为scroll事件的回调，避免代码重复。
• 初始化阶段直接执行判断函数，页面加载完成后立刻匹配当前滚动位置的头部状态，无需等待用户手动滚动。
• 添加清理函数，组件卸载时移除scroll监听，避免不必要的内存占用。

内容的提问来源于stack exchange，提问作者Esaú Morais