如何创建不同级别的固定标题？

Question

我想要一种优雅的方法来“收集”窗口顶部的多级标题，当用户滚动时，position:sticky可以让我完成90%的工作。以下代码段的效果正如我所希望的一样，但有一个异常：当Header 2b到达最上面时，Header 3b仍然可见。由于Header 3b应该是Header 2a的“子项”，我希望它在Header 2b到达最上面时要么滚动消失，要么被隐藏。（不出所料，Header 1b和Header 2d也有同样的问题。）

我知道这里的CSS是按照设计要求工作的，但是否有一种优雅的方式使其按照我的要求工作呢？我已经尝试将p设置为white的background-color并且改变z-index, 但都没有成功。

h1, h2, h3 {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}

h1 {
  background-color: red;
  height: 35px;
}
h2 {
  background-color: blue;
  height: 25px;
  top: 35px;
}
h3 {
  background-color: green;
  height: 20px;
  top: 60px;
}

<h1>Header 1a</h1>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
<h2>Header 2a</h2>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
<h3>Header 3a</h3>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
<h3>Header 3b</h3>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
<h2>Header 2b</h2>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
<h3>Header 3c</h3>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
<h3>Header 3d</h3>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
<h1>Header 1b</h1>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
<h2>Header 2c</h2>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
<h3>Header 3e</h3>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
<h3>Header 3f</h3>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
<h2>Header 2d</h2>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
<h3>Header 3g</h3>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
<h3>Header 3h</h3>
<p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>

- TobyRush

Answer 1

我认为解决这个问题的逻辑方法是考虑像下面这样的嵌套div：

h1,
h2,
h3 {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  margin:0;
}

h1 {
  background-color: red;
  height: 35px;
  z-index:3;
}

h2 {
  background-color: blue;
  height: 25px;
  top:35px;
  z-index:2;
}

h3 {
  background-color: green;
  height: 20px;
  top:60px;
  z-index:1;
}

<div>
  <h1>Header 1a</h1>
  <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
  <div>
    <h2>Header 2a</h2>
    <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
    <div>
      <h3>Header 3a</h3>
      <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
      <h3>Header 3b</h3>
      <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
    </div>
  </div>
  <div>
    <h2>Header 2b</h2>
    <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
    <div>
      <h3>Header 3c</h3>
      <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
      <h3>Header 3d</h3>
      <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
    </div>
  </div>
</div>
<div>
  <h1>Header 1b</h1>
  <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
  <div>
    <h2>Header 2c</h2>
    <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
    <div>
      <h3>Header 3e</h3>
      <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
      <h3>Header 3f</h3>
      <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
    </div>
  </div>
  <div>
    <h2>Header 2d</h2>
    <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
    <div>
      <h3>Header 3g</h3>
      <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
      <h3>Header 3h</h3>
      <p>Lorem ipsum dolor sit amet, no qui quis eloquentiam.</p>
    </div>
  </div>
</div>

- Temani Afif

---

正是我正在寻找的。我想我已经接近这个答案了，但是我的嵌套有问题。感谢您的帮助。 - TobyRush

Answer 2

你需要使用 'z-index' 标签来实现。 第一个标题应该比任何其他标题的 z-index 值都要低。 最后一个标题应该有最高的 z-index 值。 z-index 标签用于将元素放置在其他元素之下或之上。

- Anshul Singh

---

谢谢！我想知道那可能是其中的一部分，但我认为我必须涉及标题之间的空白来“掩盖”不需要的标题。看起来Temani的解决方案使用div处理了这个问题。 - TobyRush

有时候会发生这种情况，它不应该像你说的那样工作。可能是其他代码干扰了它。 - Anshul Singh