<section class="text start">
<span class="icon">π</span> Ready, set, go! Scroll to see the effect
</section>
<ul class="tracks">
<li class="track">
<div class="car">π</div>
<div class="goal"></div>
</li>
<li class="track">
<div class="motorcycle">π</div>
<div class="goal"></div>
</li>
<li class="track">
<div class="runner">π</div>
<div class="goal"></div>
</li>
</ul>
<section class="text explanation">
<span class="icon">β οΈ</span> Notice how the racers only stick inside their parent container, the track element, and don't overflow below that
</section>
/* General Styles */
body {
background: #81C161;
}
.text {
position: relative;
text-align: center;
padding: 2rem;
display: flex;
align-items: center;
justify-content: center;
font-family: system-ui, sans-serif;
font-size: 1.25rem;
}
.explanation {
height: 400px;
}
.icon {
margin-right: 1rem;
}
/* Styles for creating the circuit. Nothing important here */
.tracks {
display: flex;
justify-content: space-around;
align-items: flex-start;
/* Hard height to ensure scrolling */
height: 1200px;
}
.track {
background-color: #6C6D6E;
padding: 1rem;
border: 2px dashed #ED5F61;
height: 100%;
position: relative;
}
/* Checkered flag */
.goal {
position: absolute;
bottom: 10rem;
background-image: url('https://www.651vinyl.com/images/P/BW_Checkerboard_250.jpg');
background-size: cover;
width: 100%;
height: 24px;
left: 0;
}
/* Position of the racers. This is where the position sticky comes into place */
.car {
position: sticky;
top: 16rem;
z-index: 1;
}
.motorcycle {
position: sticky;
top: 8rem;
z-index: 1;
}
.runner {
position: sticky;
top: 4rem;
z-index: 1;
}
// Nope! Nothing to see here
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.