滚动时导航栏链接激活高亮功能异常（仅小屏幕正常）求助

嘿，我来帮你搞定这个导航高亮的bug！你说小屏正常大屏失效，大概率是因为固定的偏移量90不匹配大屏导航栏的高度，或者章节位置的判断逻辑在不同布局下出了问题。咱们一步步来修复：

问题分析 #

你的JS逻辑是通过h1元素的offsetTop来匹配滚动位置，但存在两个关键问题：

• 固定的window.scrollY + 90里的90是导航栏高度吧？大屏下导航栏通常是水平布局，高度和小屏垂直布局差异很大，这个固定值自然就失效了。
• 变量名li其实选中的是<a>标签，虽然不影响功能，但容易混淆，建议改成更清晰的命名。

修复方案 #

我们动态获取导航栏的实际高度替换固定偏移量，同时优化判断逻辑，适配不同屏幕布局：

修改后的JS代码 #

// 替换原有JS代码
const navLinks = document.querySelectorAll(".navilinks");
const sectionHeaders = document.querySelectorAll("h1");
const navbar = document.getElementById("navi");

function activeMenu() {
  // 动态获取当前导航栏的高度，自动适配大屏/小屏布局
  const navHeight = navbar.offsetHeight;
  let currentSectionIndex = sectionHeaders.length - 1;

  // 从最后一个章节往前遍历，找到当前滚动位置对应的章节
  while (currentSectionIndex > 0) {
    const sectionTop = sectionHeaders[currentSectionIndex].offsetTop;
    // 用导航栏实际高度计算偏移，判断是否滚动到该章节区域
    if (window.scrollY + navHeight >= sectionTop) {
      break;
    }
    currentSectionIndex--;
  }

  // 移除所有链接的激活状态
  navLinks.forEach(link => link.classList.remove("activenavi"));
  // 给对应章节的链接添加激活状态
  navLinks[currentSectionIndex].classList.add("activenavi");
}

// 初始化激活状态
activeMenu();
// 监听滚动事件
window.addEventListener("scroll", activeMenu);

额外检查点 #

• 锚点匹配：确保每个导航链接的href（比如#home）和对应<h1>的id完全一致，不然匹配逻辑会直接失效。
• 布局影响：如果大屏下页面有侧边栏或其他布局变化，导致<h1>的offsetTop和小屏不同，这个动态高度的方案也能自动适配，因为我们是基于实际文档位置判断的。

这样修改后，不管大屏小屏，导航栏都会根据滚动位置正确高亮对应的链接啦！

内容的提问来源于stack exchange，提问作者Aleksandar Cvetanovski Ristov