纯CSS实现滚动时粘性导航栏背景切换问题求助

核心问题 #

你写的.top-navigation.scrolled选择器无法生效——因为没有JavaScript来给导航栏添加scrolled类，纯HTML/CSS无法直接通过DOM操作动态添加类。我们需要用CSS原生特性来监听滚动状态，替代JS的类操作逻辑。

方案1：CSS滚动驱动动画（推荐，现代浏览器支持） #

利用CSS原生的滚动驱动动画特性，无需任何脚本即可实现滚动时的背景色过渡：

/* 绑定滚动时间线到页面根元素的垂直滚动 */
@scroll-timeline navbar-scroll {
  source: selector(root);
  orientation: vertical;
  scroll-offsets: 0px, 100px; /* 滚动0-100px区间触发动画过渡 */
}

.top-navigation {
  position: sticky;
  top: 0;
  z-index: 100; /* 确保导航栏在内容上方，避免被遮挡 */
  background: transparent;
  height: 5rem;
  transition: background-color 0.3s ease;
  /* 将动画绑定到滚动时间线 */
  animation: navbar-bg-change linear;
  animation-timeline: navbar-scroll;
}

/* 定义背景色过渡动画 */
@keyframes navbar-bg-change {
  0% { background-color: transparent; }
  100% { background-color: red; }
}

方案2：兼容旧浏览器的替代方案 #

如果需要兼容不支持滚动驱动动画的浏览器，可以通过添加占位粘性元素触发样式变化：

<!-- 在导航栏前添加一个占位触发元素 -->
<div class="scroll-trigger"></div>
<div aria-label="secondary" id="secondary" class="top-navigation">
  <!-- 原导航栏内容 -->
</div>

.scroll-trigger {
  position: sticky;
  top: 0;
  height: 0;
  z-index: 101;
}

.top-navigation {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  height: 5rem;
  transition: background-color 0.3s ease;
}

/* 当滚动触发元素离开视口顶部时，切换导航栏背景 */
.scroll-trigger:not(:first-child) + .top-navigation {
  background-color: red;
}

额外优化点 #

• 移除原CSS中多余的content: " "属性——该属性仅对伪元素生效，普通元素设置后无作用
• 可根据需求调整滚动触发的阈值（如方案1的scroll-offsets），匹配你需要的变色时机

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