NextJS滚动时粘性头部缩小出现闪烁问题的解决方法

问题根源分析 #

你的代码存在几个关键问题导致头部切换时闪烁：

1. 错误的初始化逻辑：组件顶层直接通过if(window.scrollY > 180)重新声明useState，违反React状态管理规则，会引发状态混乱和不必要的重渲染。
2. 滚动事件无防抖：scroll事件触发频率极高，频繁更新状态会导致组件反复重渲染，产生视觉闪烁。
3. 缺少平滑过渡：头部样式切换是瞬间突变，没有过渡动画，视觉上表现为闪烁。
4. 状态更新逻辑冗余：用setScrolled(!scrolled)代替直接赋值isScrolled，可能出现状态不一致的情况。

解决方案步骤 #

1. 修复初始化逻辑

移除组件顶层的错误判断，改用useEffect在组件挂载时初始化滚动状态，同时兼容NextJS的SSR场景（避免服务器端因window不存在报错）。

2. 添加防抖优化

对滚动事件处理函数做防抖处理，减少状态更新频率，避免频繁重渲染。

3. 加入CSS过渡动画

给所有切换样式的元素添加过渡属性，让样式变化平滑过渡，消除闪烁感。

4. 优化状态更新逻辑

直接根据滚动结果赋值状态，避免反向取反可能带来的状态不一致问题。

修改后的完整代码 #

import { useState, useEffect, useCallback } from 'react';
import Link from 'next/link';
import { RiMenu4Line } from 'react-icons/ri';
import Logo from './Logo';
import LogoMini from './LogoMini';
import ThemeSwitch from './ThemeSwitch';

// 防抖工具函数
const debounce = (func, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
};

const Header = () => {
  const [scrolled, setScrolled] = useState(false);

  // 初始化滚动状态（兼容SSR）
  useEffect(() => {
    if (typeof window !== 'undefined') {
      setScrolled(window.scrollY > 180);
    }
  }, []);

  // 防抖后的滚动处理函数
  const handleScroll = useCallback(
    debounce(() => {
      const isScrolled = window.scrollY > 180;
      if (isScrolled !== scrolled) {
        setScrolled(isScrolled);
      }
    }, 50), // 50ms防抖延迟，可按需调整
    [scrolled]
  );

  // 绑定/解绑滚动事件
  useEffect(() => {
    document.addEventListener('scroll', handleScroll);
    return () => document.removeEventListener('scroll', handleScroll);
  }, [handleScroll]);

  return (
    <header className={`z-50 px-6 lg:px-24 transition-all duration-300 ease-in-out ${
      scrolled 
        ? 'py-3 md:py-4 backdrop-blur-3xl dark:backdrop-brightness-50 bg-white/30 dark:bg-black/30 border-b border-black/[0.1] dark:border-white/[0.1] sticky top-0' 
        : 'py-5 md:py-7 bg-transparent'
    }`}>
      <div className='xl:container columns-2 mx-auto flex items-center'>
        <div className={`w-full flex justify-start items-center transition-all duration-300 ease-in-out ${scrolled ? 'h-auto' : 'h-[72px]'}`}>
          <Link href='/' title='Inside Dynamics'>
            {scrolled ? <LogoMini /> : <Logo />}
          </Link>
        </div>
        <div className={`w-full flex justify-end items-center transition-all duration-300 ease-in-out ${scrolled ? 'h-auto' : 'h-[72px] py-6'}`}>
          <menu className='text-black dark:text-white font-light hidden md:block'>
            <li className='inline pb-1 border-primary hover:border-b mr-8 cursor-pointer'><a href='/#services'>Services</a></li>
            <li className='inline pb-1 border-primary hover:border-b mr-8 cursor-pointer'><a href='/#pricing'>Pricing</a></li>
            <li className='inline pb-1 border-primary hover:border-b mr-8 cursor-pointer'><a href='/#reviews'>Reviews</a></li>
            <li className='inline pb-1 border-primary hover:border-b mr-8 cursor-pointer'><a href='/#faq'>FAQ</a></li>
            <li className='inline pb-1 border-primary hover:border-b cursor-pointer'><Link href='/contact'>Contact</Link></li>
          </menu>
          <div className={`flex justify-center items-center transition-all duration-300 ease-in-out ${scrolled ? 'ml-6' : 'ml-8'}`}>
            <ThemeSwitch />
            <button className='border border-neutral-200 hover:bg-neutral-50 active:border-primary dark:border-neutral-500 dark:hover:bg-neutral-950 p-4 ml-3 rounded-full block md:hidden' aria-label='Mobile Menu'>
              <RiMenu4Line className='size-5'/>
            </button>
          </div>
        </div>
      </div>
    </header>
  );
};

export default Header;

额外说明 #

• 防抖延迟可根据需求调整，50ms是兼顾响应速度和性能的平衡点。
• 所有涉及样式切换的元素都添加了transition-all duration-300 ease-in-out类（Tailwind CSS过渡类），确保所有变化平滑过渡。
• 使用useCallback包裹防抖函数，避免组件重渲染时频繁创建新函数，减少不必要的事件解绑/绑定操作。

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