根据当前所处区块为固定导航添加对应类名

嘿，这个需求很常见，我来给你搞定它——当页面滚动到不同区块时，自动给固定导航加上对应的类名，这样就能根据区块切换导航样式了。下面是完整的实现方案，包含注释说明：

• 监听页面的scroll事件，实时判断当前视口处于哪个section区块
• 根据当前所在区块，给导航元素添加对应的类名（比如active-a对应id为a的区块，active-b对应id为b的区块）
• 处理初始加载状态，确保页面刚打开时导航类名就正确匹配当前区块

HTML 结构 #

<div id="nav" class="navigation">menu</div>
<section class="first-section" id="a"></section>
<section class="second-section" id="b"></section>
<!-- 可以继续添加更多section区块 -->

CSS 样式 #

.navigation {
  position: fixed;
  background: white;
  width: 400px;
  height: 40px; /* 调整高度，避免文字被截断 */
  line-height: 40px; /* 让文字垂直居中 */
  border: 1px solid #000;
  color: orange;
  transition: all 0.3s ease; /* 添加过渡动画，样式切换更平滑 */
}

/* 滚动到section#a时的导航样式 */
.navigation.active-a {
  background: #333;
  color: white;
}

/* 滚动到section#b时的导航样式 */
.navigation.active-b {
  background: #666;
  color: #fff;
}

section {
  display: block;
  width: 100%;
  height: 100vh; /* 让每个区块占满整个视口，滚动体验更直观 */
}

.first-section {
  background-color: black;
}

.second-section {
  background-color: white;
}

JavaScript 逻辑 #

const nav = document.getElementById('nav');
const sections = document.querySelectorAll('section');

// 定义更新导航类名的核心函数
function updateNavClass() {
  // 计算当前滚动位置，加上导航高度避免遮挡判断
  const scrollPosition = window.scrollY + nav.offsetHeight;
  
  sections.forEach(section => {
    const sectionTop = section.offsetTop;
    const sectionBottom = sectionTop + section.offsetHeight;
    const sectionId = section.id;
    
    // 判断当前滚动位置是否处于当前section范围内
    if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
      // 先移除所有已有的active类
      nav.classList.remove('active-a', 'active-b');
      // 添加对应区块的类名
      nav.classList.add(`active-${sectionId}`);
    }
  });
}

// 页面加载完成后执行一次，确保初始状态正确
window.addEventListener('load', updateNavClass);
// 滚动时实时更新导航类名
window.addEventListener('scroll', updateNavClass);

• 如果后续添加更多section，只需要给section设置唯一id，然后在CSS中新增对应的.navigation.active-xxx样式即可，JavaScript部分不需要修改
• 把section的高度改成100vh是为了让每个区块占满屏幕，你也可以根据需求改回固定高度200px，只是滚动判断逻辑需要微调（比如去掉nav.offsetHeight的叠加）

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