仅使用HTML和CSS如何在滚动到特定页面时修改navbar颜色？

仅使用HTML和CSS完全可以实现该效果，以下是可直接落地的实现方案：

基础HTML结构 #

假设你的页面为整页滚动结构，导航栏固定在顶部，4个页面均为独立区块：

<!-- 固定顶部导航栏 -->
<nav class="navbar">
  <ul class="nav-items">
    <li>导航项1</li>
    <li>导航项2</li>
    <li>导航项3</li>
    <li>导航项4</li>
  </ul>
</nav>

<!-- 页面容器 -->
<div class="page-wrapper">
  <section class="page page-1">第一页内容</section>
  <section class="page page-2">第二页内容</section>
  <section class="page page-3">第三页内容</section>
  <section class="page page-4">第四页内容</section>
</div>

基础样式配置 #

先配置默认状态的导航栏和页面样式：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 整页滚动配置 */
html, body {
  height: 100%;
  scroll-snap-type: y mandatory;
}
/* 导航栏默认样式：透明背景+白色文字 */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 1rem 2rem;
  background: transparent;
  color: #fff;
  z-index: 999;
}
.nav-items {
  list-style: none;
  display: flex;
  gap: 2rem;
}
/* 单页样式 */
.page {
  height: 100vh;
  scroll-snap-align: start;
}
.page-1, .page-2, .page-3 {
  background: #000;
}
.page-4 {
  /* 第四页自定义背景 */
  background: linear-gradient(45deg, #ff9a9e, #fecfef, #fecfef);
}

核心滚动变色逻辑 #

方案1：CSS滚动驱动动画（兼容性：Chrome 115+、Edge 115+、Safari 16.4+） #

通过绑定页面滚动进度作为动画时间线，自动切换导航栏样式：

/* 定义导航栏样式变化动画 */
@keyframes adjust-navbar {
  /* 前3页占总滚动高度的75%，此区间保持默认样式 */
  0%, 74% {
    background: transparent;
    color: #fff;
  }
  /* 滚动到第四页（总高度75%位置及以后）切换样式 */
  75%, 100% {
    /* 可根据第四页背景调整为适配的导航栏样式，以下为示例 */
    background: rgba(0,0,0,0.7);
    color: #fff;
  }
}
/* 绑定滚动驱动动画到导航栏 */
.navbar {
  animation: adjust-navbar linear;
  /* 绑定根页面滚动条为动画时间线 */
  animation-timeline: scroll(root);
}

方案2：:has()选择器配合锚点定位 #

如果你的导航项本身带有页内锚点跳转，可以用该方案实现点击跳转/滚动到锚点时自动切换样式：
首先给第四页加id属性：

<section class="page page-4" id="page4">第四页内容</section>

添加对应CSS：

/* 当第四页成为锚点目标时，修改导航栏样式 */
body:has(#page4:target) .navbar {
  background: rgba(0,0,0,0.7);
  color: #fff;
}

以上两种方案均无需引入JavaScript，可根据你的实际页面结构和兼容需求选择。

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