我想用一种优雅的方式在用户滚动时在窗口顶部“收集”多级标题,而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>
最佳答案
我认为执行此操作的逻辑方法是考虑嵌套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>