滚动时高亮对应菜单项（解决末尾短区块无法激活菜单的问题）

我看了你的代码和问题，确实碰到了滚动高亮场景里的常见坑——末尾的短区块因为高度不够，不管是滚动浏览还是点击菜单跳转，都没法触发对应的菜单高亮。咱们先拆解核心问题，再一步步解决：

原代码的问题根源 #

你当前的判断逻辑有个关键漏洞：遍历区块时，只要找到第一个rect.top >= 0的区块，而且它不是最后一个的话就直接break了。这会导致两种尴尬场景：

1. 当滚动到页面最底部时，末尾短区块的top可能已经小于0（整个区块都滚到视口上方了），原代码会找不到currentSection，直接跳过这些短区块。
2. 点击菜单跳转到短区块时，跳转后区块的top可能还是小于0，菜单依然不会被自动高亮。

解决方案：调整判断逻辑+补充点击事件处理 #

1. 修复滚动时的当前区块判断 #

修改updateMenu里的区块匹配逻辑，补充页面滚到底部时强制选中最后一个区块的场景，同时优化整体判断逻辑：

function updateMenu(){
  const menus = document.querySelectorAll('div.sticky a');
  const sectionsAll = document.querySelectorAll('div.card');
  
  // 简化过滤逻辑：只保留包含H2标题的区块
  const sections = [...sectionsAll].filter(section => !!section.querySelector('h2'));

  let currentSection = null;
  const viewportTop = 0;
  
  // 第一步：找出所有顶部在视口及以上的区块
  const visibleSections = sections.filter(section => {
    const rect = section.getBoundingClientRect();
    return rect.top >= viewportTop;
  });

  if (visibleSections.length > 0) {
    // 取第一个符合条件的区块（最靠近视口顶部的）
    currentSection = visibleSections[0];
  } else {
    // 所有区块都在视口上方（页面已滚到底），直接选中最后一个区块
    currentSection = sections[sections.length - 1];
  }

  if(currentSection){
    // 匹配对应的菜单（建议后续用ID匹配替代文本，稳定性更高）
    const currentHeaderText = currentSection.querySelector('h2').innerText.trim();
    menus.forEach(menu => {
      if(menu.innerText.trim() === currentHeaderText){
        menu.classList.add('active');
      } else {
        menu.classList.remove('active');
      }
    });
  } else {
    // 没有有效区块时清空所有高亮
    menus.forEach(menu => menu.classList.remove('active'));
  }
}

2. 补充菜单点击的强制高亮 #

为了确保用户点击菜单时，不管区块滚动后的位置如何，都能立刻高亮对应菜单，给菜单添加点击事件：

// 给所有菜单绑定点击事件
document.querySelectorAll('div.sticky a').forEach(menu => {
  menu.addEventListener('click', (e) => {
    // 先移除所有菜单的高亮状态
    document.querySelectorAll('div.sticky a.active').forEach(item => item.classList.remove('active'));
    // 高亮当前点击的菜单
    e.currentTarget.classList.add('active');

    // 可选：替换默认锚点跳转为平滑滚动（避免跳转后菜单高亮失效）
    const targetHeaderText = e.currentTarget.innerText.trim();
    const targetSection = [...document.querySelectorAll('div.card')].find(section => {
      const sectionHeader = section.querySelector('h2');
      return sectionHeader && sectionHeader.innerText.trim() === targetHeaderText;
    });
    
    if(targetSection){
      targetSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
      e.preventDefault(); // 取消默认锚点跳转（如果用平滑滚动的话）
    }
  });
});

额外优化建议 #

• 用ID替代文本匹配：文本匹配容易因为大小写、空格、换行符出问题，建议给每个区块加唯一id（比如<div class="card" id="section-intro">），菜单的href设为#section-intro，这样匹配时直接用menu.getAttribute('href') === '#' + currentSection.id，稳定性更高。
• 防抖优化滚动事件：滚动事件触发频率极高，给updateMenu加防抖可以避免性能浪费：

// 防抖函数
const debounce = (func, delay = 100) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
};

// 替换原有的滚动监听
window.addEventListener('scroll', debounce(updateMenu));
updateMenu(); // 初始化调用

这样修改后，不管是滚动到页面底部的短区块，还是点击菜单跳转，对应的菜单都会正确高亮，解决了你遇到的不一致问题。

内容来源于stack exchange