粘性位置不“推动”其他粘性元素

Question

我觉得这里有一个明显的答案，但我无法弄清楚为什么下面的模型示例中的 \xe2\x80\x93#one不被“推” #three？

\n\n

看看MDN 给出的最后一个例子，粘性元素似乎将另一个推出窗口，而这里#one&#three似乎只是相互滑动。我觉得这与高度有关（？），但任何解释这一点的帮助将不胜感激！

\n\n

\r\n

\r\n

* {\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\nh1 {\r\n  text-align: center;\r\n  color: #000;\r\n  font: bold 20vw Helvetica, Arial, sans-serif;\r\n}\r\n\r\n.sticky {\r\n  position: sticky;\r\n  top: 0px;\r\n}\r\n\r\n#start {\r\n  width: 100%;\r\n  height: 50vh;\r\n  background: #fff;\r\n}\r\n\r\n#one {\r\n  height: 100vh;\r\n  width: 100%;\r\n  background: url(\'https://picsum.photos/900/1200/?random\');\r\n  background-position: center;\r\n  background-size: cover;\r\n}\r\n\r\n#two {\r\n  width: 50%;\r\n  position: relative;\r\n  height: 100vh;\r\n  background: url(\'https://picsum.photos/800/1200/?random\');\r\n  background-position: center;\r\n  background-size: cover;\r\n}\r\n\r\n#three {\r\n  width: 100%;\r\n  height: 100vh;\r\n  background: url(\'https://picsum.photos/700/1200/?random\');\r\n  background-position: center;\r\n  background-size: cover;\r\n}

\r\n

<div id="start">\r\n  <h1>start</h1>\r\n</div>\r\n\r\n<div id="one" class="sticky img">\r\n  <h1>one</h1>\r\n</div>\r\n\r\n<div id="two" class="img">\r\n  <h1>two</h1>\r\n</div>\r\n\r\n<div id="three" class="sticky img">\r\n  <h1>three</h1>\r\n</div>

\r\n

\r\n

\r\n

\n

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>

你也可以检查这个小提琴

希望对你有帮助。