如何创建不同级别的粘性标头? [英] How can I create different levels of sticky headers?

问题描述

我想用一种优雅的方式在用户滚动时在窗口顶部收集"多级标题，而position:sticky可以让我获得90％的访问权限.以下代码段的工作方式与我想要的一样，但有一个例外:当标题2b到达顶部时，标题3b仍然可见.由于标头3b是标头2a的子级"，因此我希望标头2b到达顶部后，滚动标头即可滚动或以某种方式隐藏. (可以预料，标题1b和标题2d都有相同的问题.)

I'd like an elegant way to "collect" multi-level headers at the top of the window as the user scrolls, and position:sticky gets me 90% of the way there. The snippet below works just as I'd like it to with one exception: when Header 2b reaches the top, Header 3b is still visible. Since Header 3b is meant to be a "child" of Header 2a, I'd like it to either scroll away or somehow be hidden once Header 2b reaches the top. (Predictably, Header 1b and Header 2d both have the same issue.)

我知道我在这里拥有CSS 应该的工作方式，但是是否有一种优雅的方法可以使其按我的要求工作?我曾尝试给p提供white的background-color并弄乱了z-index，但是我没有任何运气.

I know that what I have here is how the CSS is supposed to work, but is there an elegant way to make it work the way I'm asking? I've tried giving p a background-color of white and messing with z-index but I haven't had any luck.

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>

推荐答案

我认为这样做的逻辑方法是考虑嵌套div，如下所示:

I think the logical way to do this is to consider nested divs like below:

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>

这篇关于如何创建不同级别的粘性标头?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！