如何用Vanilla JS解决粘性头部锚点跳转内容被遮挡问题

问题根源是浏览器默认锚点跳转不会考虑即将转为固定定位的菜单占用空间：点击锚点后页面先跳转至目标元素顶部，随后滚动触发菜单变为fixed，此时菜单占据视口顶部，导致标题被遮挡。

以下是纯Vanilla JS的解决方案：

实现步骤 #

1. 获取粘性菜单的实际高度，用于后续调整滚动偏移量
2. 拦截所有锚点链接的点击事件，阻止默认跳转行为
3. 手动计算正确的滚动位置，预留菜单高度的空间，确保标题不会被遮挡

修改后的完整JS代码 #

let courseMenu = document.querySelector(".course-menu");
let courseMenuOffsetTop = courseMenu.offsetTop;
const menuHeight = courseMenu.offsetHeight;

// 菜单固定逻辑
let fixedNav = () => {
  courseMenu.classList.toggle("sticky-header", window.scrollY >= courseMenuOffsetTop);
};
window.addEventListener("scroll", fixedNav);

// 锚点点击处理逻辑
document.querySelectorAll('.course-menu a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    
    const targetElement = document.querySelector(this.getAttribute('href'));
    if (!targetElement) return;
    
    // 计算目标位置，减去菜单高度预留空间
    const scrollToPosition = targetElement.offsetTop - menuHeight;
    
    // 滚动到目标位置，可选平滑效果
    window.scrollTo({
      top: scrollToPosition,
      behavior: 'smooth'
    });
    
    // 强制更新菜单状态
    fixedNav();
  });
});

关键说明 #

• 使用offsetHeight获取菜单高度，避免硬编码数值，适配样式变化
• 通过classList.toggle简化菜单固定状态的判断逻辑
• 手动计算滚动位置时直接减去菜单高度，无论菜单当前是否固定，都能保证标题显示在菜单下方
• 调用fixedNav()确保滚动后菜单状态及时更新，避免状态不一致

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