如何实现滚动时切换固定Header背景：渐变转纯黑？

核心逻辑是监听页面滚动事件，判断Hero Image是否还在视口范围内，动态切换Header的背景样式。下面是具体实现步骤：

步骤1：修正并完善Header基础CSS #

先修复现有CSS的语法错误，同时补全固定导航栏的必要样式：

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px; /* 固定80px高度 */
  z-index: 1000;
  /* 初始使用渐变背景 */
  background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 17%, rgba(0,0,0,0) 78%, rgba(0,0,0,0) 100%);
  transition: background 0.3s ease; /* 添加过渡动画，切换更丝滑 */
}

/* 给页面内容添加上边距，避免被固定Header遮挡 */
#pageContent {
  padding-top: 80px;
}

步骤2：定义样式切换的CSS类 #

用两个类分别对应两种背景状态，方便后续JS动态切换：

/* Hero可见时的渐变背景 */
.header-gradient {
  background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 17%, rgba(0,0,0,0) 78%, rgba(0,0,0,0) 100%);
}

/* Hero不可见时的纯黑背景 */
.header-solid {
  background: #000 !important; /* 用!important确保覆盖渐变样式 */
}

步骤3：编写JavaScript滚动监听逻辑 #

通过计算滚动距离与Hero元素的位置关系，判断是否切换Header样式：

// 获取目标元素
const header = document.getElementById('header');
const heroImage = document.getElementById('heroImage');

// 计算Hero元素的底部位置（相对于文档顶部）
const heroBottom = heroImage.offsetTop + heroImage.offsetHeight;

// 滚动事件处理函数
function handleScroll() {
  // 当前滚动的距离（文档顶部到视口顶部的距离）
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

  // 判断逻辑：滚动距离 >= Hero底部位置 → Hero完全不可见
  if (scrollTop >= heroBottom) {
    header.classList.add('header-solid');
    header.classList.remove('header-gradient');
  } else {
    header.classList.add('header-gradient');
    header.classList.remove('header-solid');
  }
}

// 页面加载时先执行一次，确保初始状态正确
window.addEventListener('load', handleScroll);
// 监听滚动事件
window.addEventListener('scroll', handleScroll);

优化：添加防抖减少性能消耗 #

滚动事件会频繁触发，加个防抖函数可以降低资源占用：

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

// 替换成防抖后的监听函数
window.addEventListener('scroll', debounce(handleScroll));

这样就能实现需求：页面加载时Header显示渐变背景，滚动至Hero Image完全不可见后，Header切换为纯黑色，滚动回去则恢复渐变样式。

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