页面内锚点滚动时粘性导航栏遮挡标题的解决方法咨询

嘿，这个问题太常见啦！粘性导航栏挡住锚点定位的内容确实挺闹心的，给你几个简单又实用的解决办法，随便选一个都能搞定：

这是CSS专门为锚点滚动设计的属性，直接给目标区块设置顶部的滚动边距，值等于你粘性导航栏的高度就行。比如你的导航栏高80px，就这么写：

/* 替换成你目标区块的选择器，比如#what-i-do */
#what-i-do {
  scroll-margin-top: 80px; /* 导航栏的实际高度，自己调整数值 */
}

这个方法不需要改HTML结构，也不用JS，浏览器兼容性也很好（除了特别老的IE），简直是最优解。

如果需要兼容一些古董浏览器，可以用这个小技巧：给目标区块加和导航栏等高的内边距，再用负的外边距抵消，这样视觉上不会影响布局，但锚点定位会自动留出空间：

#what-i-do {
  padding-top: 80px; /* 导航栏高度 */
  margin-top: -80px; /* 抵消padding的高度 */
  position: relative; /* 避免影响其他元素的布局 */
}

要是你需要更灵活的控制（比如平滑滚动的同时调整位置），可以写个简单的JS监听锚点点击事件：

// 给所有锚点链接绑定点击事件
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault(); // 阻止默认的锚点跳转行为
    const targetId = this.getAttribute('href');
    const targetElement = document.querySelector(targetId);
    if (!targetElement) return;

    // 获取导航栏的高度
    const navbarHeight = document.querySelector('.your-navbar-class').offsetHeight;
    // 计算目标位置：目标元素的顶部位置减去导航栏高度
    const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - navbarHeight;

    // 平滑滚动到目标位置
    window.scrollTo({
      top: targetPosition,
      behavior: 'smooth'
    });
  });
});

记得把.your-navbar-class换成你实际的导航栏类名哦。

最后提醒下：不管用哪种方法，都要先确认你导航栏的实际高度，可以用浏览器的开发者工具（F12）查看导航栏元素的offsetHeight，数值一定要准确，不然还是会有偏差~

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