JavaScript如何在窗口resize时刷新div的offsetTop值修复导航高亮问题

解决代码 #

// 存储元素偏移值与导航节点
let page1Offset, page2Offset, page3Offset, page4Offset;
let homeNav, aboutNav, contactNav, randomNav;

// 防抖函数：避免窗口 resize 时频繁触发计算
const debounce = (fn, wait = 150) => {
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, arguments), wait);
  }
}

// 重新计算所有元素的最新偏移值
function updateOffset() {
  page1Offset = document.querySelector(".A").offsetTop;
  page2Offset = document.querySelector(".B").offsetTop;
  page3Offset = document.querySelector(".C").offsetTop;
  page4Offset = document.querySelector(".D").offsetTop;

  homeNav = document.querySelector(".home");
  aboutNav = document.querySelector(".about");
  contactNav = document.querySelector(".contact");
  randomNav = document.querySelector(".random");
}

// 导航高亮逻辑单独封装
function setNavHighlight() {
  const scrollPos = window.scrollY;
  // 先移除所有导航的高亮状态
  homeNav.classList.remove("highlight");
  aboutNav.classList.remove("highlight");
  contactNav.classList.remove("highlight");
  randomNav.classList.remove("highlight");

  // 从下往上判断所属区间，添加对应高亮
  if (scrollPos > page4Offset - 100) {
    randomNav.classList.add("highlight");
  } else if (scrollPos > page3Offset - 100) {
    contactNav.classList.add("highlight");
  } else if (scrollPos > page2Offset - 100) {
    aboutNav.classList.add("highlight");
  } else if (scrollPos > 1) {
    homeNav.classList.add("highlight");
  }
}

// 初始化执行
updateOffset();
setNavHighlight();

// 监听滚动事件
window.addEventListener("scroll", setNavHighlight);

// 监听窗口大小变化，防抖更新偏移与高亮
window.addEventListener("resize", debounce(() => {
  updateOffset();
  setNavHighlight();
}));

核心修改说明 #

• 把原来只在页面加载时执行一次的offsetTop计算逻辑抽成独立函数updateOffset，窗口大小变化时会重新调用获取最新的元素位置
• 新增防抖处理，避免窗口拖动调整大小时频繁触发计算，减少性能开销
• 高亮逻辑也单独封装，偏移更新后会立刻重新计算当前滚动位置对应的导航高亮，避免出现状态错位
• 优化了原来的判断逻辑，先统一清空所有高亮状态再添加对应类，避免出现多导航同时高亮的异常

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