如何用TailwindCSS实现React Header仅在滚动时显示阴影

可以通过监听页面滚动状态，结合React状态动态切换Header的类名，具体实现方案如下：

基础实现方案 #

在函数组件中用useState维护滚动状态，通过useEffect监听窗口滚动事件：

import { useState, useEffect } from 'react';

const Header = () => {
  // 标记是否已滚动离开顶部初始位置
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      // 判断滚动距离是否大于0
      setIsScrolled(window.scrollY > 0);
    };

    // 添加滚动监听
    window.addEventListener('scroll', handleScroll);
    // 组件卸载时移除监听，避免内存泄漏
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <header className={`sticky left-0 top-0 right-0 z-20 ${isScrolled ? 'shadow' : ''}`}>
      {/* Header内容 */}
    </header>
  );
};

export default Header;

优化：添加防抖处理 #

滚动事件会频繁触发，添加防抖可以减少状态更新次数，提升页面性能：

import { useState, useEffect } from 'react';

const Header = () => {
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    let timeoutId;
    const handleScroll = () => {
      // 防抖：延迟100ms更新状态
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        setIsScrolled(window.scrollY > 0);
      }, 100);
    };

    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
      clearTimeout(timeoutId);
    };
  }, []);

  return (
    <header className={`sticky left-0 top-0 right-0 z-20 ${isScrolled ? 'shadow' : ''}`}>
      {/* Header内容 */}
    </header>
  );
};

export default Header;

可选：使用clsx简化类名拼接 #

如果需要处理更复杂的类名逻辑，可以用clsx库（需先安装：npm install clsx）：

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

const Header = () => {
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 0);
    };

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

  // 用clsx动态组合类名
  const headerClasses = clsx(
    'sticky left-0 top-0 right-0 z-20',
    isScrolled && 'shadow'
  );

  return (
    <header className={headerClasses}>
      {/* Header内容 */}
    </header>
  );
};

export default Header;

关键说明 #

• 依赖sticky定位确保Header始终固定在顶部，这样滚动时阴影效果才会明显
• 滚动监听要在组件卸载时移除，避免内存泄漏
• 防抖时间可根据需求调整，平衡响应速度和性能

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