如何实现单列滚动时粘性标题堆叠且不重叠？

要解决滚动时粘性标题重叠的问题，核心是让每个后续标题的粘性定位起点等于前面所有标题的高度总和，这样它们就会依次堆叠在上方，而非挤在同一个顶部位置。

方案1：固定标题高度时用纯CSS实现 #

如果你的标题高度是固定值（比如50px），可以直接通过兄弟选择器设置每个标题的top值：

.column {
  overflow-y: auto; /* 给容器添加滚动条，方便测试效果 */
  max-height: 400px; /* 限制容器高度触发滚动 */
}

h1 {
  position: sticky;
  background: rgba(255,0,0,0.25);
  margin: 0; /* 清除默认边距避免高度计算偏差 */
  height: 50px; /* 固定标题高度 */
}

/* 第一个标题粘在顶部 */
h1:nth-child(1) {
  top: 0;
}

/* 第二个标题粘在第一个标题下方 */
h1:nth-child(2) {
  top: 50px;
}

/* 第三个标题粘在前两个标题下方 */
h1:nth-child(3) {
  top: 100px;
}

/* 第四个标题粘在前三个标题下方 */
h1:nth-child(4) {
  top: 150px;
}

对应的HTML结构：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="col-12 col-md-4 column">
  <h1>Heading 1</h1>
  <p>这里可以添加任意多的内容测试滚动效果：Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <h1>Heading 2</h1>
  <p>更多测试内容：Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <h1>Heading 3</h1>
  <p>继续添加内容：Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  <h1>Heading 4</h1>
  <p>最后一段测试内容：Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

方案2：动态高度时用JavaScript实现 #

如果标题高度不固定（比如内容换行导致高度变化），纯CSS无法动态计算高度总和，这时候可以用JS自动设置每个标题的top值：

.column {
  overflow-y: auto;
  max-height: 400px;
}

h1 {
  position: sticky;
  background: rgba(255,0,0,0.25);
  margin: 0;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="col-12 col-md-4 column">
  <h1>Heading 1<br>（多行标题）</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <h1>Heading 2</h1>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <h1>Heading 3<br>这是一个<br>三行的标题</h1>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  <h1>Heading 4</h1>
  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<script>
const headings = document.querySelectorAll('.column h1');
let cumulativeHeight = 0;

headings.forEach((heading) => {
  // 设置当前标题的top值
  heading.style.top = `${cumulativeHeight}px`;
  // 累加当前标题的高度到总和中
  cumulativeHeight += heading.offsetHeight;
});

// 窗口大小变化时重新计算高度
window.addEventListener('resize', () => {
  cumulativeHeight = 0;
  headings.forEach(heading => {
    heading.style.top = `${cumulativeHeight}px`;
    cumulativeHeight += heading.offsetHeight;
  });
});
</script>

这个JS方案会自动计算每个标题的实际高度，动态设置top值，并且在窗口大小变化时重新计算，确保堆叠效果始终正确。

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