<div class="stack-wrapper">
<section class="stack-section panel-1">
<div class="panel-content">
<h2>Section One</h2>
<p>Scroll down. This section will stick to the top and the next panel will slide securely over it.</p>
</div>
</section>
<section class="stack-section panel-2">
<div class="panel-content">
<h2>Section Two</h2>
<p>Pure CSS positioning doing the heavy lifting.</p>
</div>
</section>
<section class="stack-section panel-3">
<div class="panel-content">
<h2>Section Three</h2>
<p>Beautiful, performant, and incredibly simple.</p>
</div>
</section>
</div>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin: 0;
background: #0f172a;
}
.stack-wrapper {
position: relative;
}
.stack-section {
/* The core magic - each section sticks to the top of the viewport */
position: sticky;
top: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.3);
}
.panel-content {
text-align: center;
color: #ffffff;
padding: 40px;
max-width: 600px;
}
.panel-content h2 {
font-size: 4rem;
margin: 0 0 20px 0;
letter-spacing: -2px;
}
.panel-content p {
font-size: 1.25rem;
color: #cbd5e1;
line-height: 1.6;
}
.panel-1 {
background: #0f172a;
}
.panel-2 {
background: #1e293b;
}
.panel-3 {
background: #334155;
}
