css - 纯CSS多个堆叠位置粘？

Question

是否可以在纯 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>

标签： csscss-positionsticky

Answer 1

您需要通过添加一些偏移量使所有元素都粘在同一个容器 （包含块）上。

这是一个基本示例，其中元素将粘在主体上：

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其包含块时将停止移动

---

获取更多详细信息/示例的相关问题：

为什么带有 position:sticky 的元素不会粘在父元素的底部？

定义“高度”时，“位置：粘性”不起作用

如何创建不同级别的置顶标题？