如何让position:sticky作用于嵌套标题，实现同级元素式滚动效果

这个问题我之前也碰到过！嵌套的标题用position:sticky确实会有这个问题——因为子标题的粘性定位是相对于它的父容器（也就是父标题所在的区块），所以父标题会一直粘在顶部，子标题只能在父容器范围内粘住，没法把父标题"挤"出去。

下面分两种方案来解决：

方案一：调整HTML结构（纯CSS实现，推荐） #

如果你的HTML结构允许修改，最简单的办法是把所有标题都提到同一层级，脱离嵌套关系。这样所有标题的粘性定位都是相对于body，设置相同的top:0后，新的标题滚动到顶部时就会自动把之前的标题顶出屏幕，完全符合你要的效果。

示例代码： #

HTML

<h1>Level 1 Heading</h1>
<div class="content">
  <p>这里是H1对应的内容，很长很长的内容...</p>
  <p>更多内容...</p>
</div>

<h2>Level 2 Heading</h2>
<div class="content">
  <p>这里是H2对应的内容...</p>
</div>

<h3>Level 3 Heading</h3>
<div class="content">
  <p>这里是H3对应的内容...</p>
</div>

CSS

h1, h2, h3 {
  position: sticky;
  top: 0;
  margin: 0;
  padding: 0.5rem;
  background: #fff; /* 加背景色避免被下面的内容穿透 */
  border-bottom: 1px solid #eee;
}

/* 可以给不同层级的标题加不同样式区分 */
h1 {
  font-size: 1.8rem;
  background: #f5f5f5;
}

h2 {
  font-size: 1.5rem;
  top: 0; /* 和H1同top值，滚动时会覆盖H1 */
}

h3 {
  font-size: 1.2rem;
  top: 0;
}

.content {
  padding: 1rem;
  line-height: 1.6;
}

这样滚动的时候，H2会把H1顶走，H3会把H2顶走，完全像同级元素的效果。

方案二：保留嵌套结构（JS辅助实现） #

如果没法修改HTML结构，只能用JavaScript来模拟这个效果。核心思路是：监听滚动事件，判断当前哪个标题应该显示在顶部，然后通过动态修改样式或者克隆标题的方式，让子标题"覆盖"父标题的粘性定位。

示例代码： #

HTML（保留你的嵌套结构）

<div class="section">
  <h1>Level 1 Heading</h1>
  <div class="sub-section">
    <h2>Level 2 Heading</h2>
    <div class="sub-sub-section">
      <h3>Level 3 Heading</h3>
      <p>大量内容...</p>
    </div>
  </div>
</div>

CSS

/* 先给所有标题基础样式 */
h1, h2, h3 {
  margin: 0;
  padding: 0.5rem;
  background: #fff;
  border-bottom: 1px solid #eee;
}

/* 克隆的标题会用这个类固定在顶部 */
.sticky-clone {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: none;
}

/* 给原内容加padding，避免被克隆标题遮挡 */
body {
  padding-top: 3rem; /* 等于标题的高度 */
}

JavaScript

// 1. 收集所有标题，按出现顺序排序
const headings = Array.from(document.querySelectorAll('h1, h2, h3'));
// 2. 克隆每个标题，添加到body
const clones = headings.map(heading => {
  const clone = heading.cloneNode(true);
  clone.classList.add('sticky-clone');
  document.body.appendChild(clone);
  return clone;
});

// 3. 监听滚动事件，判断当前显示哪个克隆标题
function updateStickyHeadings() {
  const scrollTop = window.scrollY;
  
  // 找到当前应该显示的标题
  let activeIndex = -1;
  for (let i = headings.length - 1; i >= 0; i--) {
    const heading = headings[i];
    const rect = heading.getBoundingClientRect();
    // 当标题顶部进入视口（或在视口上方）时，标记为当前激活的
    if (rect.top <= 0) {
      activeIndex = i;
      break;
    }
  }
  
  // 隐藏所有克隆标题，显示当前激活的
  clones.forEach((clone, index) => {
    clone.style.display = index === activeIndex ? 'block' : 'none';
  });
  
  // 处理标题层级的样式（比如H3应该覆盖H2，H2覆盖H1）
  if (activeIndex !== -1) {
    clones[activeIndex].style.zIndex = 100 + activeIndex;
  }
}

// 初始化和监听滚动
window.addEventListener('scroll', updateStickyHeadings);
updateStickyHeadings();

// 窗口 resize 时重新计算
window.addEventListener('resize', updateStickyHeadings);

这个方案会克隆所有标题，然后根据滚动位置显示对应的克隆标题，模拟出子标题把父标题顶出去的效果。需要注意调整body的padding-top来避免内容被固定的克隆标题遮挡，窗口大小变化时也要重新计算位置。

两种方案各有优缺点：方案一简单可靠，适合能调整HTML结构的场景；方案二不需要改结构，但需要写JS逻辑，还要处理各种边界情况。

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