如何创建不同级别的粘性标头？

Question

我想以一种优雅的方式在用户滚动时在窗口顶部“收集”多级标题，并position:sticky让我获得90％的访问权限。以下代码段的工作方式与我想要的一样，但有一个例外：标题2b到达顶部时，标题3b仍然可见。由于标头3b是标头2a的“子级”，因此我希望标头2b到达顶部后，滚动标头即可滚动或以某种方式隐藏。（可以预料，标题1b和标题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>

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>