基于React实现滚动时调整Header大小（复刻指定Codepen效果）

嘿，我帮你把那个原生JS的滚动Header效果转成React版本啦！先理清楚原代码的核心逻辑：监听页面滚动事件，当滚动距离超过200px时给Header添加smaller类来缩小尺寸，滚动距离不足时移除这个类。在React里我们可以用Hooks来优雅实现这个功能，下面是完整的实现方案：

1. React组件实现 #

我们使用useState来管理Header的缩放状态，用useEffect来绑定和清理滚动监听事件，避免内存泄漏：

import React, { useState, useEffect } from 'react';
import './Header.css';

const ScrollHeader = () => {
  // 状态：标记Header是否需要缩小
  const [isHeaderSmaller, setIsHeaderSmaller] = useState(false);

  useEffect(() => {
    // 滚动处理函数，和原逻辑一致
    const handleScroll = () => {
      const scrollDistance = window.pageYOffset || document.documentElement.scrollTop;
      const shrinkThreshold = 200;
      setIsHeaderSmaller(scrollDistance > shrinkThreshold);
    };

    // 绑定滚动监听
    window.addEventListener('scroll', handleScroll);

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

  return (
    <header 
      id="js-header" 
      // 根据状态动态添加类名
      className={`header-container ${isHeaderSmaller ? 'smaller' : ''}`}
    >
      {/* 这里替换成你实际的Header内容，比如Logo、导航栏 */}
      <h1>我的动态Header</h1>
      <nav>
        <a href="#home">首页</a>
        <a href="#about">关于</a>
        <a href="#contact">联系</a>
      </nav>
    </header>
  );
};

export default ScrollHeader;

2. 对应CSS样式 #

保持和原示例一致的过渡效果，你可以把下面的样式放到Header.css文件中：

.header-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2rem 1.5rem;
  background-color: #2d3436;
  color: #ffffff;
  transition: all 0.3s ease-in-out; /* 平滑过渡动画 */
  z-index: 1000;
}

.header-container.smaller {
  padding: 0.8rem 1.5rem;
  font-size: 0.9rem;
}

/* 可选：给页面内容加顶部padding，避免被固定Header遮挡 */
body {
  padding-top: 8rem;
}

关键点说明 #

• 状态管理：用useState替代原生JS直接操作DOM类名，符合React的状态驱动UI理念
• 事件监听：通过useEffect绑定滚动事件，同时在清理函数中移除监听，避免组件卸载后仍存在事件监听导致的内存泄漏
• 动态类名：通过模板字符串根据状态动态拼接类名，实现和原代码一致的样式切换逻辑
• 过渡动画：保留原示例的transition属性，让Header缩放过程更平滑

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