<div class="stack-container">
  <div class="header-section">
    <h1>Our Features</h1>
    <p>Scroll down to see them stack.</p>
  </div>
  
  <div class="card stack-card" style="--index: 1;">
    <div class="card-body">
      <h2>Analytics</h2>
      <p>Real-time data at your fingertips.</p>
    </div>
  </div>
  
  <div class="card stack-card" style="--index: 2;">
    <div class="card-body">
      <h2>Automation</h2>
      <p>Save time with smart workflows.</p>
    </div>
  </div>
  
  <div class="card stack-card" style="--index: 3;">
    <div class="card-body">
      <h2>Security</h2>
      <p>Enterprise-grade protection.</p>
    </div>
  </div>
  
  <div class="card stack-card" style="--index: 4;">
    <div class="card-body">
      <h2>Support</h2>
      <p>24/7 dedicated assistance.</p>
    </div>
  </div>
</div>

* { box-sizing: border-box; }
body {
  font-family: system-ui, "Segoe UI", sans-serif;
  background: #f1f5f9;
  padding-bottom: 100px;
}

.stack-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.header-section {
  text-align: center;
  margin-bottom: 40px;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card {
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 -10px 20px rgba(0,0,0,0.05);
  margin-bottom: 20px;
  /* The Sticky Magic */
  position: sticky;
  top: 100px; 
  /* Dynamic spacing based on index */
  top: calc(100px + (var(--index) * 20px));
}

/* Colors for visual distinction */
.card:nth-child(2) { background: #3b82f6; color: white; }
.card:nth-child(3) { background: #8b5cf6; color: white; }
.card:nth-child(4) { background: #ec4899; color: white; }
.card:nth-child(5) { background: #10b981; color: white; }

h1 { margin: 0 0 10px; font-size: 2.5rem; }
p { font-size: 1.1rem; opacity: 0.9; }
h2 { margin: 0 0 10px; font-size: 2rem; }

Back to Snippets

Sticky Stacking Cards Scroll Effect

Create a trendy scrolling presentation where cards stick to the top of the viewport and stack on top of each other. This effect adds depth to your content and is achieved purely with CSS `position: sticky`.

437

#css

#sticky

#scroll effect

#stacking cards

#presentation

#layout

#modern ui

Run /HTML *CSS ()JS Output Console0 Live Updates Focus

* { box-sizing: border-box; }
body {
  font-family: system-ui, "Segoe UI", sans-serif;
  background: #f1f5f9;
  padding-bottom: 100px;
}

.stack-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.header-section {
  text-align: center;
  margin-bottom: 40px;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card {
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 -10px 20px rgba(0,0,0,0.05);
  margin-bottom: 20px;
  /* The Sticky Magic */
  position: sticky;
  top: 100px; 
  /* Dynamic spacing based on index */
  top: calc(100px + (var(--index) * 20px));
}

/* Colors for visual distinction */
.card:nth-child(2) { background: #3b82f6; color: white; }
.card:nth-child(3) { background: #8b5cf6; color: white; }
.card:nth-child(4) { background: #ec4899; color: white; }
.card:nth-child(5) { background: #10b981; color: white; }

h1 { margin: 0 0 10px; font-size: 2.5rem; }
p { font-size: 1.1rem; opacity: 0.9; }
h2 { margin: 0 0 10px; font-size: 2rem; }