Position Sticky

by Louis Walch

HTML

<div id="hero">Hero</div>
<div id="container">
    <div id="first">First</div>
    <div id="second">Second</div>
</div>

CSS

HTML, BODY {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

* { margin: 0; padding: 0; }

#hero {
    height: 300px;
    background-color: orange;
}

#container {
    position: relative;
}

#first {
    height: 400px;
    background-color: yellow;
    position: sticky;
    top: 0;
    z-index: 2;
}
#second {
    height: 300vh;
    position: relative;
    z-index: 3;
    background-color: white;
}