在纯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>
答案 0 :(得分：2)
您需要通过添加一些偏移量来使所有元素都坚持相同的容器 （包含块）。
这是一个基本示例，其中元素将粘在身上：
body {
margin:0;
min-height:200vh;
border:2px solid;
}
.first {
height:50px;
background:red;
position:sticky;
top:0;
}
.second {
height:50px;
background:blue;
position:sticky;
top:52px;
}
.third {
height:50px;
background:green;
position:sticky;
top:104px;
}<div class="first"></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<div class="second"></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
<div class="third"></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
如果它们位于不同的容器中，将不起作用：
body {
margin: 0;
min-height: 300vh;
}
body > div {
border:2px solid;
}
.first {
height: 50px;
background: red;
position: sticky;
top: 0;
}
.second {
height: 50px;
background: blue;
position: sticky;
top: 52px;
}
.third {
height: 50px;
background: green;
position: sticky;
top: 104px;
}<div>
<div class="first"></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>
<div>
<div class="second"></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>
<div>
<div class="third"></div>
<p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>
粘性定位元素是其计算出的位置值为粘性的元素。它被视为相对定位，直到其包含的块在其流根（或在其中滚动的容器）内超过指定的阈值（例如，将top设置为auto以外的值），然后将其视为“卡住” 直到遇到其包含块的相反边缘 ref
这里最重要的部分是最后一部分。因此，如果所有元素不在同一容器中，则每个元素都将到达其容器的边缘，并且粘滞行为将在那里停止。请注意，在最后一个示例中，每个元素到达其包含块的bottom-border时将如何停止移动
获得更多示例的另一个相关问题：css sticky - not sticky to bottom of parent
答案 1 :(得分：2)
您需要做的就是将带有position:sticky的元素嵌套在一起。然后将top:2em增量设置为后续的粘性标头。
您的笔包含两列，因此我假设您需要两个滚动框，因此代码很长。
body {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
align-items: center;
justify-content: center;
height: 100vh;
background: #222;
}
.mainParent {
height: 90%;
width: 80%;
background: rgba(222, 222, 222, 0.10);
color: #ddd;
overflow-y: scroll;
border: 4px solid #ddd;
}
.mainParent {
margin: 0.5em
}
.header {
position: sticky;
padding: 0.5em;
background: #ddd;
color: #222;
text-align: center;
}
#header01 {
top: 0;
}
#header02 {
top: 2em;
}
#header03 {
top: 4em;
}
#header04 {
top: 6em;
}
#header05 {
top: 8em;
}
.content {
text-align: center
}<div class="mainParent">
<div class="header" id="header01">Header 01</div>
<div id="content01" class="content">
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>Content 1-1<br><br>
<div class="header" id="header02">Header 02</div>
<div id="content02" class="content">
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>Content 1-2<br><br>
<div class="header" id="header03">Header 03</div>
<div id="content03" class="content">
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>Content 1-3<br><br>
<div class="header" id="header04">Header 04</div>
<div id="content04" class="content">
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>Content 1-4<br><br>
<div class="header" id="header05">Header 05</div>
<div id="content05" class="content">
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>Peace 🖖
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mainParent">
<div class="header" id="header01">Header 01</div>
<div id="content01" class="content">
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>Content 2-1<br><br>
<div class="header" id="header02">Header 02</div>
<div id="content02" class="content">
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>Content 2-2<br><br>
<div class="header" id="header03">Header 03</div>
<div id="content03" class="content">
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>Content 2-3<br><br>
<div class="header" id="header04">Header 04</div>
<div id="content04" class="content">
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>Content 2-4<br><br>
<div class="header" id="header05">Header 05</div>
<div id="content05" class="content">
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>Peace 🖖
</div>
</div>
</div>
</div>
</div>
</div>
</div>
您可以找到此代码作为笔here。
希望这个答案对您有所帮助。
和平