如何实现滚动到网页区块时自动选中导航栏？2018年简洁方案

嘿，这个需求我太熟了！2018年那会儿刚好是Intersection Observer普及、Bootstrap Scrollspy也成熟的阶段，两个方案都简洁靠谱，完全不用那些老掉牙的jQuery scroll监听（性能差还麻烦）。你提到的Stack Overflow 2018调查页就是用的类似Intersection Observer的逻辑，Bootstrap官方文档的侧边导航也是靠Scrollspy实现的。咱们一个个说清楚：

这绝对是当时的最优解——原生浏览器API，异步监听元素是否进入视口，性能碾压传统的scroll事件监听，完全不依赖任何库。

实现步骤： #

1. 给导航和区块加对应标识：导航项的href绑定对应区块的id，给导航项统一加个类（比如.nav-link），选中状态用.active类区分。
2. 配置Intersection Observer：设置触发时机的偏移量和阈值，让选中逻辑更贴合用户体验。
3. 初始化监听：给所有区块添加监听，当区块进入视口时自动切换导航的选中状态，同时处理页面加载时的初始选中。

代码示例：

<!-- HTML结构 -->
<nav class="navbar">
  <a href="#section1" class="nav-link">Section 1</a>
  <a href="#section2" class="nav-link">Section 2</a>
  <a href="#section3" class="nav-link">Section 3</a>
</nav>

<section id="section1" class="content-section">...</section>
<section id="section2" class="content-section">...</section>
<section id="section3" class="content-section">...</section>

/* 选中状态样式 */
.nav-link.active {
  color: #007bff;
  font-weight: bold;
  border-bottom: 2px solid #007bff;
}

/* 给区块加足够高度方便测试滚动 */
.content-section {
  height: 800px;
  margin: 20px 0;
}

// 获取所有导航项和区块元素
const navLinks = document.querySelectorAll('.nav-link');
const sections = document.querySelectorAll('.content-section');

// Observer配置：调整触发时机，顶部留100px避免导航栏遮挡，底部留50%视口高度
const observerOptions = {
  root: null, // 以视口为监听根元素
  rootMargin: '-100px 0px -50% 0px',
  threshold: 0.1 // 当区块10%进入视口时触发
};

// 创建Observer实例
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 移除所有导航项的选中状态
      navLinks.forEach(link => link.classList.remove('active'));
      // 给对应导航项添加选中状态
      const targetLink = document.querySelector(`.nav-link[href="#${entry.target.id}"]`);
      if (targetLink) targetLink.classList.add('active');
    }
  });
}, observerOptions);

// 监听每个区块
sections.forEach(section => observer.observe(section));

// 页面加载时自动选中当前视口的区块
window.addEventListener('load', () => {
  const activeSection = Array.from(sections).find(section => {
    const rect = section.getBoundingClientRect();
    return rect.top <= 100 && rect.bottom >= 100;
  });
  if (activeSection) {
    const targetLink = document.querySelector(`.nav-link[href="#${activeSection.id}"]`);
    navLinks.forEach(link => link.classList.remove('active'));
    targetLink?.classList.add('active');
  }
});

关键说明： #

• rootMargin：用来调整触发监听的视口范围，避免固定导航栏遮挡导致选中时机错位；
• threshold：设置元素进入视口的比例才触发回调，避免快速滚动时频繁切换；
• 这个方案在2018年的浏览器支持已经很不错（除了IE，不过当时IE已经逐渐被淘汰）。

如果你已经在用Bootstrap（不管是3.3还是2018年刚出的Bootstrap 4），直接用自带的Scrollspy组件就行——连一行自定义JS都不用写，只要给HTML加几个属性就能实现联动。

实现步骤： #

1. 确保引入Bootstrap资源：Bootstrap 3需要引入jQuery + Bootstrap.js；Bootstrap 4同样依赖jQuery（Bootstrap 5才移除jQuery依赖，2018年还没出），但不用自己写JS；
2. 给滚动容器加属性：一般是给<body>加data-spy="scroll"、data-target="#navbar"（指定联动的导航栏）、data-offset="100"（设置滚动偏移量）；
3. 导航项绑定对应区块：导航项的href对应区块的id，Bootstrap会自动给当前视口对应的导航项加.active类。

代码示例：

<!-- 给body加scrollspy配置 -->
<body data-spy="scroll" data-target="#navbar" data-offset="100">
  <!-- 导航栏 -->
  <nav id="navbar" class="navbar fixed-top bg-light">
    <ul class="nav">
      <li class="nav-item">
        <a class="nav-link" href="#section1">Section 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section2">Section 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#section3">Section 3</a>
      </li>
    </ul>
  </nav>

  <!-- 内容区块 -->
  <section id="section1" style="height: 800px; margin: 20px 0;">...</section>
  <section id="section2" style="height: 800px; margin: 20px 0;">...</section>
  <section id="section3" style="height: 800px; margin: 20px 0;">...</section>
</body>

<!-- 引入依赖（Bootstrap 4为例） -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

关键说明： #

• data-offset：用来抵消固定导航栏的高度，避免导航栏挡住内容时就触发选中；
• 导航栏必须有唯一的id，且和data-target对应；
• 这个方案完全利用Bootstrap自带的功能，代码极简，适合已经用Bootstrap的项目。

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