JS单页网站左侧导航滚动高亮Bug修复与代码优化咨询

• 多导航项同时高亮：IntersectionObserver默认会将所有满足相交阈值的区块标记为可见，快速滚动时多个区块同时触发相交回调，逻辑里没有做唯一激活项的优先级判定，就会重复添加mark类
• 高亮状态丢失：默认相交判定线在视口上下边缘，当两个区块过渡位置、最后一个区块高度小于视口高度时，没有区块满足相交条件，就会出现无高亮的情况；刻意拉长区块高度只是凑触发条件，没有修正判定逻辑，无法彻底解决问题
• 代码冗余：没有建立导航项和区块的通用映射关系，硬编码每一组元素的判断逻辑，堆砌重复的if/else分支，后续修改维护成本极高

核心逻辑调整三点：

1. 调整IntersectionObserver的rootMargin参数，将激活判定线移到视口中上部，避免矮区块无法触发判定
2. 维护可见区块集合，每次相交状态变化时，取集合中距离视口顶部最近的区块作为唯一激活项，从根源避免多高亮
3. 用data-*属性绑定导航项和对应区块的关联，抽离通用的类名切换逻辑，删除硬编码判断

完整实现代码 #

HTML 结构 #

<!-- 左侧固定导航 -->
<nav class="side-nav">
  <a href="#sec1" class="nav-item" data-target="sec1">第一区块</a>
  <a href="#sec2" class="nav-item" data-target="sec2">第二区块</a>
  <a href="#sec3" class="nav-item" data-target="sec3">第三区块</a>
  <a href="#sec4" class="nav-item" data-target="sec4">第四区块</a>
</nav>

<!-- 页面内容区块 -->
<main>
  <section id="sec1" class="content-block">第一区块内容</section>
  <section id="sec2" class="content-block">第二区块内容</section>
  <section id="sec3" class="content-block">第三区块内容</section>
  <section id="sec4" class="content-block">第四区块内容（高度无需拉满视口）</section>
</main>

CSS 样式 #

.side-nav {
  position: fixed;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 100;
}
.nav-item {
  padding: 6px 14px;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.2s;
}
/* 高亮状态类 */
.nav-item.mark {
  background-color: #165DFF;
  color: #fff;
}
.content-block {
  min-height: 75vh;
  margin-left: 160px;
  padding: 48px 24px;
}

JavaScript 逻辑 #

// 批量获取关联元素
const navItems = document.querySelectorAll('.nav-item')
const contentBlocks = document.querySelectorAll('.content-block')
// 存储当前处于可见范围的区块ID
const visibleBlockSet = new Set()

// 统一更新导航高亮状态，同一时间仅保留一个激活项
const refreshActiveNav = () => {
  if (visibleBlockSet.size === 0) return
  // 遍历所有可见区块，找到离视口顶部最近的作为当前激活项
  let activeId = null
  let minOffsetTop = Infinity
  visibleBlockSet.forEach(id => {
    const blockTop = document.getElementById(id).getBoundingClientRect().top
    if (blockTop < minOffsetTop) {
      minOffsetTop = blockTop
      activeId = id
    }
  })
  // 批量切换类名，无冗余判断
  navItems.forEach(item => {
    item.classList.toggle('mark', item.dataset.target === activeId)
  })
}

// 初始化滚动监听
const scrollObserver = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    const blockId = entry.target.id
    entry.isIntersecting ? visibleBlockSet.add(blockId) : visibleBlockSet.delete(blockId)
  })
  refreshActiveNav()
}, {
  // 调整判定区域：激活线设在视口顶部往下20%位置，底部留70%缓冲，解决矮区块无法触发问题
  rootMargin: '-20% 0px -70% 0px',
  threshold: 0
})

// 批量注册监听，无需逐个绑定
contentBlocks.forEach(block => scrollObserver.observe(block))

// 顶部边界兜底：滚动到页面最顶部时默认激活第一个导航项
window.addEventListener('scroll', () => {
  if (window.scrollY < 80) {
    navItems.forEach((item, idx) => item.classList.toggle('mark', idx === 0))
  }
}, { passive: true })

• 多高亮问题：无论滚动速度多快，最终只会选中离视口顶部最近的可见区块作为激活项，不会出现多个菜单项同时带mark类的情况
• 高亮丢失问题：通过判定区域调整+顶部兜底逻辑，无论区块高度、滚动位置如何，都不会出现无高亮的情况，无需刻意拉长区块高度
• 可维护性提升：后续新增区块/导航项时，只需要在HTML中给对应元素加上匹配的id和data-target属性即可，无需修改JS逻辑，无冗余判断分支

内容的提问来源于stack exchange，提问作者Azat Deniz Işık