带固定页头的页面如何实现粘性子标题？

方案一：动态适配页头高度的粘性子标题（无嵌套滚动） #

针对你提到的方案1痛点，通过CSS变量+JS动态更新解决动态页头高度问题，同时修正滚动条覆盖页头的问题：

实现步骤 #

1. 基础样式设置

   • 页头设为position: fixed并置顶，保证层级最高；
   • 用CSS变量--header-height存储页头高度，子标题的sticky定位依赖该变量；
   • 给body设置padding-top: var(--header-height)，避免内容被页头遮挡，同时让滚动条仅在内容区显示。

   .header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 100;
     background: #fff; /* 避免内容透过页头显示 */
   }
   
   .content-subtitle {
     position: sticky;
     top: var(--header-height); /* 粘在页头下方 */
     background: #fff;
     z-index: 50; /* 低于页头层级，避免遮挡页头 */
     margin: 0;
     padding: 1rem 0;
   }
   
   body {
     padding-top: var(--header-height);
     margin: 0;
   }
   

2. 动态更新页头高度
   用JS监听窗口尺寸变化、页头内容变动（比如菜单展开/收起），实时更新CSS变量：

   const header = document.querySelector('.header');
   
   function syncHeaderHeight() {
     const height = header.offsetHeight;
     document.documentElement.style.setProperty('--header-height', `${height}px`);
   }
   
   // 初始化高度
   syncHeaderHeight();
   
   // 监听窗口缩放
   window.addEventListener('resize', syncHeaderHeight);
   
   // 监听页头内容/结构变化（比如动态加载菜单）
   const headerObserver = new MutationObserver(syncHeaderHeight);
   headerObserver.observe(header, {
     childList: true,
     subtree: true,
     attributes: true
   });
   

优势 #

• 无需嵌套滚动区域，规避Safari滚动bug；
• 自动适配页头动态高度，子标题始终粘在可见区域顶部；
• 原生滚动行为正常，锚点功能不受影响。

方案二：修复嵌套滚动的锚点与Safari bug（保留flex/grid布局） #

如果你倾向用垂直拆分布局，可针对性修复两个问题：

1. 修复锚点失效 #

手动监听锚点链接与hash变化，计算目标元素在滚动区域内的偏移量，触发滚动：

const mainScroll = document.querySelector('.main-content');

// 处理初始页面锚点
handleAnchorJump();

// 监听锚点链接点击
document.querySelectorAll('a[href^="#"]').forEach(link => {
  link.addEventListener('click', (e) => {
    const targetId = link.getAttribute('href').slice(1);
    const targetEl = document.getElementById(targetId);
    if (!targetEl) return;

    e.preventDefault();
    // 计算目标元素相对于滚动区域的顶部偏移
    const offsetTop = targetEl.offsetTop - mainScroll.offsetTop;
    mainScroll.scrollTo({
      top: offsetTop,
      behavior: 'smooth' // 可选平滑滚动
    });
    // 更新URL hash
    window.history.pushState({}, '', `#${targetId}`);
  });
});

// 监听浏览器前进后退的hash变化
window.addEventListener('hashchange', handleAnchorJump);

function handleAnchorJump() {
  const hash = window.location.hash.slice(1);
  if (!hash) return;

  const targetEl = document.getElementById(hash);
  if (targetEl && mainScroll) {
    const offsetTop = targetEl.offsetTop - mainScroll.offsetTop;
    mainScroll.scrollTo({ top: offsetTop });
  }
}

2. 规避iOS Safari滚动bug #

通过动态切换滚动区域的overflow属性，解决输入框聚焦时的异常：

const inputs = document.querySelectorAll('input, textarea');

inputs.forEach(input => {
  input.addEventListener('focus', () => {
    // 聚焦时，临时禁用嵌套滚动，改用文档滚动
    mainScroll.style.overflowY = 'visible';
    document.body.style.overflowY = 'auto';
    // 自动滚动到输入框位置
    input.scrollIntoView({ behavior: 'smooth', block: 'center' });
  });

  input.addEventListener('blur', () => {
    // 失焦后恢复嵌套滚动
    mainScroll.style.overflowY = 'auto';
    document.body.style.overflowY = 'hidden';
  });
});

同时，将滚动区域的height: 100vh替换为height: -webkit-fill-available，适配iOS视口高度，减少滚动异常。

现代浏览器简化方案：用scroll-margin-top优化锚点 #

如果无需兼容IE等旧浏览器，可在方案一基础上添加scroll-margin-top，让锚点自动避开页头：

/* 给所有锚点目标元素设置 */
[id] {
  scroll-margin-top: var(--header-height);
}

这样点击锚点链接时，页面会自动滚动到目标元素下方留出页头高度的位置，避免被页头遮挡。

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