滚动到指定区块时如何高亮导航栏对应项？代码问题排查

问题说明 #

已实现点击导航栏滚动到对应区块的功能，但滚动页面到区块时，无法自动高亮上方导航栏的对应选项，以下是现有代码及问题排查：

现有代码 #

HTML #

<h1>Landing Page </h1>

  <h2>Section 1</h2>
  <p></p>
  <p></p>

  <h2>Section 2</h2>
  <p></p>
  <p></p>

  <h2>Section 3</h2>
  <p></p>
  <p></p>

  <h2>Section 4</h2>
  <p></p>
  <p></p>

<script src="JS/src.js"></script>

JavaScript #

const navBarMenu = document.getElementById('navbar__list');
const sections = document.querySelectorAll('section');
const links = document.querySelectorAll('.menu__link');

const createNewList= function () {

let creatingSections = '';    
 
for (section of sections){
    const referencing = section.id;
    const namingReferencing = section.dataset.nav;


    creatingSections += `<li><a class="menu__link" href="#${referencing}" >${namingReferencing}</a></li>`;
}

navBarMenu.innerHTML = creatingSections;
};

createNewList();

window.addEventListener('scroll', function() {

    sections.forEach(function(active){

    if (active.getBoundingClientRect().y >= -400 && active.getBoundingClientRect().y <=150){
        active.classList.add('your-active-class');
    }

    else{
        active.classList.remove('your-active-class');
    }

});
});

问题遗漏点分析 #

1. HTML结构缺失关键元素

   • 没有带id="navbar__list"的导航容器，导致navBarMenu为null，无法生成导航项
   • 页面区块未用<section>标签包裹，也没有添加id和data-nav属性，sections集合为空，导航项生成逻辑完全失效

2. 导航链接获取时机错误

   • links = document.querySelectorAll('.menu__link')在导航项生成前执行，此时还没有导航链接，集合为空，后续无法操作导航项高亮

3. 缺少导航项的高亮逻辑

   • 滚动监听仅处理了section的your-active-class类，完全未将section的激活状态与对应导航项关联，没有对导航链接添加/移除高亮类的逻辑

修复后的代码 #

HTML #

<!-- 添加导航容器 -->
<ul id="navbar__list"></ul>

<h1>Landing Page </h1>

<!-- 用section包裹区块，添加id和data-nav属性 -->
<section id="section1" data-nav="Section 1">
  <h2>Section 1</h2>
  <p></p>
  <p></p>
</section>

<section id="section2" data-nav="Section 2">
  <h2>Section 2</h2>
  <p></p>
  <p></p>
</section>

<section id="section3" data-nav="Section 3">
  <h2>Section 3</h2>
  <p></p>
  <p></p>
</section>

<section id="section4" data-nav="Section 4">
  <h2>Section 4</h2>
  <p></p>
  <p></p>
</section>

<script src="JS/src.js"></script>

JavaScript #

const navBarMenu = document.getElementById('navbar__list');

const createNewList = function () {
  const sections = document.querySelectorAll('section');
  let creatingSections = '';    
 
  for (const section of sections) {
    const referencing = section.id;
    const namingReferencing = section.dataset.nav;
    creatingSections += `<li><a class="menu__link" href="#${referencing}" >${namingReferencing}</a></li>`;
  }

  navBarMenu.innerHTML = creatingSections;
};

createNewList();

window.addEventListener('scroll', function() {
  const sections = document.querySelectorAll('section');
  const links = document.querySelectorAll('.menu__link');
  
  sections.forEach((section, index) => {
    const rect = section.getBoundingClientRect();
    const isActive = rect.top >= -400 && rect.top <= 150;
    
    // 处理section激活状态
    if (isActive) {
      section.classList.add('your-active-class');
      // 给对应导航项添加高亮类
      links[index].classList.add('active-link');
    } else {
      section.classList.remove('your-active-class');
      links[index].classList.remove('active-link');
    }
  });
});

补充样式 #

需要在CSS中定义导航高亮样式，示例：

.active-link {
  background-color: #2c3e50;
  color: white;
  font-weight: bold;
}

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