Sticky position not 'pushing' other sticky elements

I feel like there is an obvious answer here but I cannot work out why – in this mock-up example below – #one is not 'pushed' up by #three?

#one

#three

Looking at the last example given by MDN it appears that the sticky elements push one-another out of the window whereas here #one & #three seem to just slide over each other. I feel like it is something to do with the heights(?) but any help with explaining this would be appreciated!

#one

#three

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

h1 {
text-align: center;
color: #000;
font: bold 20vw Helvetica, Arial, sans-serif;
}

.sticky {
position: sticky;
top: 0px;
}

#start {
width: 100%;
height: 50vh;
background: #fff;
}

#one {
height: 100vh;
width: 100%;
background: url('https://picsum.photos/900/1200/?random');
background-position: center;
background-size: cover;
}

#two {
width: 50%;
position: relative;
height: 100vh;
background: url('https://picsum.photos/800/1200/?random');
background-position: center;
background-size: cover;
}

#three {
width: 100%;
height: 100vh;
background: url('https://picsum.photos/700/1200/?random');
background-position: center;
background-size: cover;
}

<div id="start">
<h1>start</h1>
</div>

<div id="one" class="sticky img">
<h1>one</h1>
</div>

<div id="two" class="img">
<h1>two</h1>
</div>

<div id="three" class="sticky img">
<h1>three</h1>
</div>

2 Answers
2

You need to use that position: sticky; inside any wrapper. Here I have updated your dom structure a little bit.

position: sticky;

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

h1 {
text-align: center;
color: #000;
font: bold 20vw Helvetica, Arial, sans-serif;
}

.sticky {
position: sticky;
top: 0px;
}

#start {
width: 100%;
height: 50vh;
background: #fff;
}

#one {
height: 100vh;
width: 100%;
background: #00f;
}

#two {
width: 50%;
position: relative;
height: 100vh;
background: #fff;
}

#three {
width: 100%;
height: 100vh;
background: #f00;

<div id="start">
<h1>start</h1>
</div>

<div id="one">
<div class="sticky">
<h1>one</h1>
</div>
</div>

<div id="two">
<h1>two</h1>
</div>

<div id="three">
<div class="sticky">
<h1>Three</h1>
</div>
</div>

You can also check this fiddle

Hope this will help you.

#two

#one

#one

#two

#three

#one

Div #three quite simply needed to be positioned absolute!

#three

absolute

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

h1 {
text-align: center;
color: #000;
font: bold 20vw Helvetica, Arial, sans-serif;
}

.sticky {
position: sticky;
top: 0px;
}

#start {
width: 100%;
height: 50vh;
background: #fff;
}

#one {
height: 100vh;
width: 100%;
background: url('https://picsum.photos/900/1200/?random');
background-position: center;
background-size: cover;
}

#two {
width: 50%;
position: relative;
height: 100vh;
background: url('https://picsum.photos/800/1200/?random');
background-position: center;
background-size: cover;
}

#three {
width: 100%;
height: 100vh;
background: url('https://picsum.photos/700/1200/?random');
background-position: center;
background-size: cover;
position:absolute;
}

<div id="start">
<h1>start</h1>
</div>

<div id="one" class="sticky img">
<h1>one</h1>
</div>

<div id="two" class="img">
<h1>two</h1>
</div>

<div id="three" class="img">
<h1>three</h1>
</div>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.