如何修复单页网站粘性头部滚动问题：菜单点击后头部被标题遮挡

• 通过JavaScript调整滚动偏移
  监听菜单点击事件，计算粘性头部高度，滚动时让目标位置自动避开头部区域：

  document.querySelectorAll('nav a').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
      e.preventDefault();
      const target = document.querySelector(this.getAttribute('href'));
      const headerHeight = document.querySelector('.sticky-header').offsetHeight;
      
      window.scrollTo({
        top: target.offsetTop - headerHeight,
        behavior: 'smooth'
      });
    });
  });
  

• CSS原生滚动边距方案
  给标题元素设置scroll-margin-top，值等于粘性头部的实际高度，直接修正锚点滚动位置：

  .section-title {
    scroll-margin-top: 80px; /* 替换为你的粘性头部高度 */
  }
  

• 锚点定位的CSS兼容方案
  针对不支持scroll-margin-top的旧浏览器，可通过内边距和负外边距组合调整：

  .section-title {
    position: relative;
    padding-top: 80px; /* 头部高度 */
    margin-top: -80px; /* 抵消内边距带来的空间 */
  }
  

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