JavaScript滚动时获取当前section ID并实现导航点激活切换

要实现页面滚动时对应导航点自动切换激活状态，核心思路是监听滚动事件，实时判断当前视口对应的section，再给导航点添加激活类。以下是具体实现步骤：

1. 优化HTML结构 #

给每个导航项添加统一类名，方便后续选择和操作：

<div class="dot-navigation">
  <div class="dot-item">
    <a href="#home"></a>
  </div>
  <div class="dot-item">
    <a href="#about"></a>
  </div>
  <div class="dot-item">
    <a href="#services"></a>
  </div>
  <div class="dot-item">
    <a href="#clients"></a>
  </div>
  <div class="dot-item">
    <a href="#reviews"></a>
  </div>
  <div class="dot-item">
    <a href="#contactus"></a>
  </div>
</div>

<!-- 页面中对应的section，确保id与导航a标签的href一致 -->
<section id="home">首页内容</section>
<section id="about">关于我们</section>
<section id="services">服务介绍</section>
<section id="clients">客户案例</section>
<section id="reviews">用户评价</section>
<section id="contactus">联系我们</section>

2. 定义激活状态的CSS样式 #

先写导航点基础样式，再定义激活态样式（可根据设计调整）：

/* 导航容器基础样式 */
.dot-navigation {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

/* 单个导航项样式 */
.dot-navigation .dot-item {
  margin: 12px 0;
  cursor: pointer;
}

.dot-navigation .dot-item a {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #999;
  transition: background-color 0.2s ease;
}

/* 激活状态样式 */
.dot-navigation .dot-item.active a {
  background-color: #3498db;
  transform: scale(1.2);
}

3. 实现滚动监听的JavaScript逻辑 #

通过监听滚动事件，计算每个section的位置，判断当前视口对应的section，再切换导航点的激活类：

// 获取所有导航项和页面section
const dotItems = document.querySelectorAll('.dot-navigation .dot-item');
const sections = document.querySelectorAll('section');

// 更新激活导航点的函数
function updateActiveDot() {
  const scrollTop = window.scrollY || document.documentElement.scrollTop;
  // 遍历每个section，判断是否在当前视口范围内
  sections.forEach((section, index) => {
    const sectionOffsetTop = section.offsetTop;
    const sectionHeight = section.offsetHeight;
    // 加入100px偏移量，让激活切换更贴合视觉体验
    if (scrollTop >= sectionOffsetTop - 100 && scrollTop < sectionOffsetTop + sectionHeight - 100) {
      // 移除所有导航项的激活类
      dotItems.forEach(item => item.classList.remove('active'));
      // 给对应导航项添加激活类
      dotItems[index].classList.add('active');
    }
  });
}

// 页面加载时初始化激活状态
window.addEventListener('load', updateActiveDot);
// 监听滚动事件，触发更新
window.addEventListener('scroll', updateActiveDot);

4. 性能优化（可选） #

滚动事件会频繁触发，添加防抖函数减少不必要的计算：

// 防抖函数
function debounce(func, delay = 80) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(func, delay);
  };
}

// 用防抖包裹滚动监听
window.addEventListener('scroll', debounce(updateActiveDot));

你可以根据自己的设计需求，调整CSS样式和偏移量参数，适配不同的页面布局。

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