页面滚动时如何修改粘性透明头部的背景颜色为白色

可行实现方案 #

你可以通过JS监听滚动事件+CSS类切换的方式实现需求，这个方案兼容性好，也不会和你现有样式冲突：

第一步：调整CSS样式

在你现有CSS的基础上补充过渡效果和滚动后的样式类：

#site-header-inner {
  height: 0px;
  z-index: 170;
  margin: 0 auto;
  width: 100%;
  position: fixed;
  top: 0;
  margin-top: 10px;
  /* 新增：默认透明背景+过渡动画，切换更顺滑 */
  background-color: transparent;
  transition: background-color 0.3s ease;
}

/* 新增：滚动后激活的类，白色背景 */
#site-header-inner.scrolled {
  background-color: #fff;
  /* 按需可加：滚动后取消顶部间距 margin-top: 0; */
}

第二步：添加JS控制逻辑

把下面的代码放到页面</body>标签之前，或者放在DOM加载完成的回调中即可：

document.addEventListener('DOMContentLoaded', () => {
  const header = document.querySelector('#site-header-inner');
  // 滚动阈值，可根据需求调整，这里和你原有的顶部margin一致
  const scrollThreshold = 10;

  const toggleHeaderState = () => {
    window.scrollY > scrollThreshold 
      ? header.classList.add('scrolled') 
      : header.classList.remove('scrolled');
  };

  // 页面加载时先执行一次，适配刷新后已滚动的场景
  toggleHeaderState();
  // 监听滚动事件
  window.addEventListener('scroll', toggleHeaderState);
});

常见不生效排查点 #

如果添加后没有效果，可以按下面的顺序排查：

• 样式优先级冲突：可以给.scrolled类的background-color属性加!important临时测试，确认是不是被其他更高优先级的样式覆盖了
• JS执行时机错误：不要把JS代码放在<head>里不加DOM加载监听，会导致找不到头部元素
• 高度问题：你原有样式里height: 0，如果背景没显示，确认子元素是不是溢出了容器，可以给#site-header-inner加overflow: visible，或者把height改成你头部实际的高度值

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