Question

0

111

Views

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

I want to make 2 divs 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 stops being sticky, gets 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.

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

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

over 4 years ago · Santiago Trujillo

Answer question

0

111

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

Find remote jobs

Andres GPT