粘性定位没有“推动”其他粘性元素

Question

我觉得这里有一个显而易见的答案，但我不明白为什么在下面的模拟示例中，#one没有被#three“推”上去？

查看 MDN 给出的最后一个示例，似乎粘性元素会相互推开窗口，而这里的#one和#three似乎只是彼此滑动。我感觉这可能与高度有关，但任何有关解释的帮助都将不胜感激！

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
  color: #000;
  font: bold 20vw Helvetica, Arial, sans-serif;
}

.sticky {
  position: sticky;
  top: 0px;
}

#start {
  width: 100%;
  height: 50vh;
  background: #fff;
}

#one {
  height: 100vh;
  width: 100%;
  background: url('https://picsum.photos/900/1200/?random');
  background-position: center;
  background-size: cover;
}

#two {
  width: 50%;
  position: relative;
  height: 100vh;
  background: url('https://picsum.photos/800/1200/?random');
  background-position: center;
  background-size: cover;
}

#three {
  width: 100%;
  height: 100vh;
  background: url('https://picsum.photos/700/1200/?random');
  background-position: center;
  background-size: cover;
}

<div id="start">
  <h1>start</h1>
</div>

<div id="one" class="sticky img">
  <h1>one</h1>
</div>

<div id="two" class="img">
  <h1>two</h1>
</div>

<div id="three" class="sticky img">
  <h1>three</h1>
</div>

- Jack Clarke

Answer 1

您需要在任何包装器中使用position: sticky;。这里我稍微更新了您的DOM结构。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
  color: #000;
  font: bold 20vw Helvetica, Arial, sans-serif;
}

.sticky {
  position: sticky;
  top: 0px;
}

#start {
  width: 100%;
  height: 50vh;
  background: #fff;
}

#one {
  height: 100vh;
  width: 100%;
  background: #00f;
}

#two {
  width: 50%;
  position: relative;
  height: 100vh;
  background: #fff;
}

#three {
  width: 100%;
  height: 100vh;
  background: #f00;

<div id="start">
  <h1>start</h1>
</div>

<div id="one">
  <div class="sticky">
    <h1>one</h1>
  </div>  
</div>

<div id="two">
  <h1>two</h1>
</div>

<div id="three">
  <div class="sticky">
    <h1>Three</h1>
  </div>  
</div>

您可以查看此示例代码。

希望对您有所帮助。

- kravisingh

---

非常感谢您的帮助 - 这个包装器是否也适用于div本身之外？实际上，我想要固定在顶部的不是div内部的文本，而是整个div - 因此，例如，在最初的示例中，#two 重叠了 #one（宽度为50％），我希望仍然可以实现这一点？ - Jack Clarke

我猜外部包装器不起作用，您必须为每个“粘性div”添加一个包装器。或者，您可以直接将您的粘性类添加到标题中，就像这样 Fiddle。 - kravisingh

抱歉，我觉得我表达不够清楚 - 我已经更新了div的背景图像，以使我的意思更加明显。我不希望div内的文本粘在任何地方，我希望#one div本身固定在顶部，而#two在其上方通过，之后#three将#one推出视野？ - Jack Clarke

Answer 2

简单来说，Div #three 需要被定位为 absolute ！

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
  color: #000;
  font: bold 20vw Helvetica, Arial, sans-serif;
}

.sticky {
  position: sticky;
  top: 0px;
}

#start {
  width: 100%;
  height: 50vh;
  background: #fff;
}

#one {
  height: 100vh;
  width: 100%;
  background: url('https://picsum.photos/900/1200/?random');
  background-position: center;
  background-size: cover;
}

#two {
  width: 50%;
  position: relative;
  height: 100vh;
  background: url('https://picsum.photos/800/1200/?random');
  background-position: center;
  background-size: cover;
}

#three {
  width: 100%;
  height: 100vh;
  background: url('https://picsum.photos/700/1200/?random');
  background-position: center;
  background-size: cover;
  position:absolute;
}

<div id="start">
  <h1>start</h1>
</div>

<div id="one" class="sticky img">
  <h1>one</h1>
</div>

<div id="two" class="img">
  <h1>two</h1>
</div>

<div id="three" class="img">
  <h1>three</h1>
</div>

- Jack Clarke