如何为每篇文章实现粘性副标题？解决滚动时段落重叠问题

你的问题核心在于粘性元素的层级覆盖和定位作用范围，以下是具体修复方案：

1. 给粘性副标题添加背景与层级 #

默认情况下sticky定位的元素不会遮挡下方滚动的内容，导致段落会"透"过副标题显示。给副标题添加背景色和层级，就能让它"盖住"下方内容：

main.previous-knowledge h2 {
  position: sticky;
  top: 0;
  background: #fff; /* 匹配页面背景色，避免透显 */
  z-index: 1; /* 确保层级高于段落 */
}

2. 确保粘性定位的作用范围有效 #

sticky元素的粘性效果仅在自身父元素（<article>）的范围内生效，且父元素不能设置overflow: hidden这类会截断粘性范围的属性。保持<section>和<article>为默认块级元素即可，这样滚动到下一个副标题时，当前副标题会被自然顶出视口。

完整代码示例 #

HTML（无需修改） #

<main class="previous-knowledge">
  <h1>Title 1</h1>
  <section>
    <article>
      <h2>Subtitle 1</h2>
      <p>Very big paragraph 1</p>
    </article>
    <article>
      <h2>Subtitle 2</h2>
      <p>Very big paragraph 2</p>
    </article>
  </section>
</main>

CSS（修复后） #

main.previous-knowledge h2 {
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 1;
  margin: 0; /* 可选：消除默认边距避免滚动间隙 */
  padding: 1rem 0; /* 可选：增加内边距提升可读性 */
}

/* 可选：给段落设置高度方便测试滚动效果 */
main.previous-knowledge p {
  height: 1000px;
}

修改后滚动页面时，每个副标题会稳定粘在顶部，段落始终保持在对应副标题下方；当滚动到下一个副标题时，当前副标题会被顶出视口，实现预期的粘性切换效果。

内容的提问来源于stack exchange，提问作者Anthony Luzquiños