Stay Sticky until the next sticky div

Question

How do I stop a a sticky div from overlapping a second sticky div when it comes into view? Currently, if I have multiple sticky divs after each other, they all stack until they've reach the final sticky item, then they all move up together, but I want Sticky 1 to stay sticky exactly in the center of the screen until Sticky 2 hits it, then it moves up and Sticky 2 stays in place until Sticky 3 hits it, then it moves up - so no overlapping...

So the next div down is actually the boundary of the sticky div.

Also: Will top:50% always make it exactly vertically centered?

HTML

<div class="sticky-container">
  <div class="sticky-this">
    STICKY 1
  </div>
  <div class="sticky-this">
    STICKY 2
  </div>
  <div class="sticky-this">
    STICKY 3
  </div>
  <div class="sticky-this">
    STICKY 4
  </div>
</div>

CSS:

.sticky-container {
  position:relative;
}

.sticky-this {
  position:sticky;
  height:1000px;
  top:50%
}

Codepen:

https://codepen.io/maniac123/pen/KKWyZbN

Where do you want sticky 1 to move up to when sticky2 hits it? Should it just move up and disappear off the top of the screen or does it go to the top of the viewport and stay there or... — A Haworth, May 30 '21 at 20:36

score 0 · Answer 1 · answered May 30 '21 at 17:48

This is happening to you because your background is transparent so use any color in the background of the sticky-this div.

.sticky-container {
  position:relative;
}

.sticky-this {
  background-color: white; /* code is added here */
  position:sticky;
  height:1000px;
  top:50%;
}

<div class="sticky-container">
  <div class="sticky-this">
    STICKY 1
  </div>
  <div class="sticky-this">
    STICKY 2
  </div>
  <div class="sticky-this">
    STICKY 3
  </div>
  <div class="sticky-this">
    STICKY 4
  </div>
</div>

Stay Sticky until the next sticky div

1 Answers1