使用 css 创建粘性布局答案

【问题标题】：Creating a sticky layout with css使用 css 创建粘性布局
【发布时间】：2022-01-17 17:19:45
【问题描述】：

如何将页面设置为工作like this？然后，每个 div 内部都会有子级，它们都应该继承该行为。

基本上 3 个部分：向下滚动时，顶部（绿色）一个固定在顶部，但直到它与第三个（蓝色）页面部分发生冲突。

如果我添加position: sticky;，它似乎什么也没做。或者当它发生时（无法弄清楚究竟是什么使它起作用），它只影响节容器而不影响里面的孩子。 Position: fixed; 有效，但不能满足我的需要。

代码：

* {
    margin: 0;
    padding: 0;
}

div {
    width: 100%;
}

.green {
    background: #5fc466b7;
}

.orange {
    background: #e3c046b7;
}

.blue {
    background: #767bd7b7;
}

p {
    padding-bottom: 200px;
}

<div class="green">
  <p>content</p>
  <p>content</p>
  <p>content</p>
</div>
<div class="orange">
  <p>content</p>
  <p>content</p>
  <p>content</p>
</div>
<div class="blue">
  <p>content</p>
  <p>content</p>
  <p>content</p>
</div>

【问题讨论】：

您需要在前 2 个部分周围放置一个容器，以便绿色部分仅在该容器内保持粘性。蓝色部分在此容器之后开始，因此一旦您滚动到容器之外，绿色部分也将开始上升。有一个很好的解释here
您需要设置粘性元素的顶部，否则它将不起作用。

标签： html css layout sticky

【解决方案1】：

我已添加position:sticky。您还需要设置top css 属性才能正确堆叠。

* {
    margin: 0;
    padding: 0;
}

div {
    width: 100%;
    height:50vh;
}

.green {
    background: #5fc466b7;
}

.orange {
    background: #e3c046b7;
}

.blue {
    background: #767bd7b7;
}

p {
    //padding-bottom: 200px;
}
.sticky{
position: sticky;
top:0;
}
.sticky--last{
top: 50vh;
}

<div class="green sticky">
  <p>content</p>
  <p>content</p>
  <p>content</p>
</div>
<div class="orange">
  <p>content</p>
  <p>content</p>
  <p>content</p>
</div>
<div class="blue sticky sticky--last">
  <p>content</p>
  <p>content</p>
  <p>content</p>
</div>

【讨论】：

如果两个容器的高度加起来大于 100vh，这将如何工作，就像里面有很多内容一样？如果我添加扩展容器的内容（因此橙色和蓝色容器不能同时完全放在页面上），绿色部分会覆盖橙色和蓝色部分。我希望它只越过橙色部分并与蓝色部分“碰撞”。我希望这是有道理的。