How do you make 2 separate divs take turns to stick at the top of the page

March 19, 2022

I want to make 2 divs as sticky headers at the top when the page is being scrolled. The FIRST DIV gets to stick only for a while till the SECOND DIV appears at a particular point on the screen. When the SECOND DIV, as it scrolls upwards, reaches half the page (for instance) the FIRST DIV becomes UNsticky, is pushed away and then gets to be replaced by the SECOND DIV as the next sticky element at the top.

I managed to make first div stick to the top with my css but have no clue as to what do with the second div.

<style>
    .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;
    }

</style>

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

Any advise on this would be most appreciated. I thank you in advance for your kind help 🙏👍♥️

>Solution :

The trick is to use a wrapping div that acts as a boundary for the 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>