javascript - 你如何让2个独立的div轮流停留在页面顶部

Question

我想在滚动页面时在顶部制作 2 个 div 粘性标题。

FIRST DIV 只会粘一段时间，直到 SECOND DIV 出现在屏幕上的特定点。

当 SECOND DIV 向上滚动时，到达页面的一半(例如)FIRST DIV 不再是粘性，得到被推开，然后被 SECOND DIV 替换为顶部的下一个粘性元素。

我设法用我的 CSS 使第一个 div 保持在顶部，但不知道如何处理 second div。

.body {
  margin: 0;
}

h3 {
  background-color: #E9BDF5;
  width: 100%;
}

.firstDiv {
  text-align: center;
  background-color: yellow;
  width: 100%;
  height: 70px;
  position: sticky;
  top: 0;
}

.secondDiv {
  text-align: center;
  background-color: yellow;
  width: 100%;
  height: 60px;
}

<h3>These text don't stick</h3>
<p>
  This paragraph will scroll up and will not stick at the top
</p>
<p>
  This paragraph will scroll up and
</p>

<div class="firstDiv">
  <h2>First Div - Becomes sticky (temporarily)</h2>
</div>

<h3>These text don't stick</h3>

<p>
  This paragraph will scroll up and will not stick at the top
</p>
<p>
  This paragraph will scroll up and will not stick at the top
</p>
<p>
  This paragraph will scroll up and will not stick at the top
</p>
<p>
  This paragraph will scroll up and will not stick at the top
</p>
<p>
  This paragraph will scroll up and will not stick at the top
</p>
<p>
  This paragraph will scroll up and will not stick at the top
</p>
<p>
  This paragraph will scroll up and will not stick at the top
</p>
<p>
  This paragraph will scroll up and will not stick at the top
</p>
<p>
  This paragraph will scroll up and will not stick at the top
</p>
<p>
  This paragraph will scroll up and will not stick at the top
</p>
<p>
  This paragraph will scroll up and will not stick at the top
</p>
<p>
  This paragraph will scroll up and will not stick at the top
</p>
<p>
  This paragraph will scroll up and will not stick at the top
</p>
<p>
  This paragraph will scroll up and will not stick at the top
</p>

<div class="secondDiv">
  <h2>Second Div - Becomes the sticky header</h2>
</div>

<h3>These text don't stick</h3>

<p>
  This paragraph will scroll up and will not stick at the top
</p>
<p>
  This paragraph will scroll up and will not stick at the top
</p>
<p>
  This paragraph will scroll up and will not stick at the top
</p>
<p>
  This paragraph will scroll up and will not stick at the top
</p>
<p>
  This paragraph will scroll up and will not stick at the top
</p>
<p>
  This paragraph will scroll up and will not stick at the top
</p>
<p>
  This paragraph will scroll up and will not stick at the top
</p>
<p>
  This paragraph will scroll up and will not stick at the top
</p>
<p>
  This paragraph will scroll up and will not stick at the top
</p>
<p>
  This paragraph will scroll up and will not stick at the top
</p>
<p>
  This paragraph will scroll up and will not stick at the top
</p>
<p>
  This paragraph will scroll up and will not stick at the top
</p>
<p>
  This paragraph will scroll up and will not stick at the top
</p>

如有任何建议，我们将不胜感激。提前感谢您的帮助🙏👍♥️

Answer 1

诀窍是使用包装 div 作为 position: sticky;

的边界

html {
  font-size: 150%;
}

.firstDiv,
.secondDiv {
  position: sticky;
  top: 0;
  background-color: white;
}

<h3>These text don't stick</h3>
<p>
  This paragraph will scroll up and will not stick at the top
</p>
<p>
  This paragraph will scroll up and
</p>

<div>
  <div class="firstDiv">
    <h2>First Div - Becomes sticky (temporarily)</h2>
  </div>

  <h3>These text don't stick</h3>

  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
</div>

<div>
  <div class="secondDiv">
    <h2>Second Div - Becomes the sticky header</h2>
  </div>

  <h3>These text don't stick</h3>

  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
  <p>
    This paragraph will scroll up and will not stick at the top
  </p>
</div>