如何创建不同级别的置顶标题？答案

【问题标题】：How can I create different levels of sticky headers?如何创建不同级别的置顶标题？
【发布时间】：2019-05-01 18:39:13
【问题描述】：

我想要一种优雅的方式来在用户滚动时在窗口顶部“收集”多级标题，position:sticky 让我获得了 90% 的路径。下面的 sn-p 就像我希望的那样工作，但有一个例外：当 Header 2b 到达顶部时，Header 3b 仍然可见。由于 Header 3b 是 Header 2a 的“子级”，我希望它要么滚动出去，要么在 Header 2b 到达顶部时以某种方式隐藏。（可以预见，Header 1b 和 Header 2d 都有相同的问题。）

我知道我在这里所拥有的是应该工作的 CSS，但是有没有一种优雅的方式让它按照我的要求工作？我试过给p 一个background-color 或white 并搞乱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>

【问题讨论】：

标签： html css css-position sticky

【解决方案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>

【讨论】：

正是我想要的。我想我已经接近这个了，但我的嵌套已经关闭了。感谢您的帮助。

【解决方案2】：

您需要使用“z-index”标签才能这样做。第一个标头的 z-index 值应低于任何其他标头。最后一个标头应该具有最高的 z-index 值。 z-index 标签用于将元素放在任何其他元素的下方或上方。

【讨论】：

谢谢！我想知道这是否可能是其中的一部分，但我认为我必须在标题之间包含空白以“掩盖”不需要的标题。看起来 Temani 的解决方案使用 divs 处理。
有时会发生，它不应该像你说的那样工作。可能是其他代码干扰它。