是否可以使用纯CSS在多个粘性元素上方堆叠多个粘性元素?
所需行为可在此处查看: https://webthemez.com/demo/sticky-multi-header-scroll/index.html
我想使用纯CSS来实现,而不是JavaScript实现。我已经尝试过多个粘性元素的组合,但无法防止它们推出其他粘性元素。我已经尝试将它们放置在相同的堆叠上下文中:
#sticky .sticky-1,
#sticky .sticky-2
{
position: sticky;
}
#sticky .sticky-1
{
top: 1em;
z-index: 1;
}
#sticky .sticky-2
{
top: 2em;
z-index: 1;
}
但是无法使其工作,如下所示。如有任何见解,将不胜感激!
#container
{
display: grid;
grid-template-columns: 50% 50%;
}
#sticky .sticky-1,
#sticky .sticky-2
{
position: sticky;
}
#sticky .sticky-1
{
top: 1em;
z-index: 1;
}
#sticky .sticky-2
{
top: 2em;
z-index: 1;
}
#fixed
{
position: relative;
}
#fixed .sticky-1
{
position: fixed;
top: 0;
}
#fixed .sticky-2
{
position: fixed;
top: 1em;
}
<div id="container">
<article id="sticky">
<header>
</header>
<main><h1 class="sticky-1">Sticky heading</h1>
<p>here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. </p>
</main>
<section>
<h2 class="sticky-2">Both headings should stick at the same time.</h2>
<p> And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. </p>
</section>
</article>
<article id="fixed">
<header>
</header>
<main><h1 class="sticky-1">Fixed heading</h1>
<p>Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. oes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. </p>
</main>
<section>
<h2 class="sticky-2">Another fixed to show how they should stick.</h2>
<p>And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. </p>
</section>
</article>
</div>