logo标签列表

如何使2个独立的div交替固定在页面顶部

javascripthtmlcss
3

我想要在页面滚动时使两个div成为固定的头部。

第一个div会一直固定到屏幕特定位置，直到第二个div出现。

当第二个div向上滚动时，当它达到页面的一半（例如）时，第一个div停止固定并被推开，然后被第二个div替换为下一个固定元素的头部。

我已经使用了CSS让第一个div固定在顶部，但不知道如何操作第二个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>

非常感谢您提供的任何建议，我将不胜感激。在此预先感谢您的帮助 ♥️

你能给我演示一下吗？谢谢。 - Khangsimi
尝试这个：https://dev59.com/X18d5IYBdhLWcg3wkS_Y - Caio Oliveira
1个回答
2

关键是使用一个包裹

作为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>

哇，@christiansany，你太棒了。简单而有效。你的解决方案刚刚解决了我的问题。非常感谢你。 - Khangsimi
很高兴能帮忙 :D - christiansany
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接