滚动堆叠卡片

Sticky Stacking Cards

中级网页

往下滚时，每张卡片滑到顶部就停住，下一张从下面盖上来，前面那张略微缩小、变暗，像把卡片一张张摞起来。用来讲「一二三四步」或者几个核心卖点，比普通列表有节奏感得多。

你可能会说：「官网的「四步上手」能不能做成往下滚时卡片一张张叠起来的效果？」

效果预览卡片滚到顶部就停住，一张张叠起来

正在加载演示…

怎么做3 步做出来

1
每张卡片都设成粘性定位
所有卡片放在同一个容器里，每张都 position: sticky。滚到顶部时卡片就停住，后面的卡片继续往上走，正好盖在它上面。top 每张多加一点（比如 16px），叠起来时能露出前面卡片的边缘，读者能看出下面还压着几张。
查看代码收起代码html
```
<section class="stack">
  <article class="stack__card" style="--i: 0">
    <span>01</span><h3>描述你的想法</h3>
  </article>
  <article class="stack__card" style="--i: 1">
    <span>02</span><h3>生成第一版</h3>
  </article>
  <article class="stack__card" style="--i: 2">
    <span>03</span><h3>边看边改</h3>
  </article>
</section>
```

粘性定位 + 逐张错开

容器底部要留出足够的空白，最后一张卡片才有地方停住。sticky 有个常见的坑：只要某个祖先元素设了 overflow: hidden（或 auto），粘性定位就会失效，排查时先看祖先元素。

查看代码css

.stack {
  padding-bottom: 40vh; /* 给最后一张留出停住的空间 */
}
.stack__card {
  position: sticky;
  top: calc(80px + var(--i) * 16px); /* 80px 是顶部导航栏的高度 */
  height: 320px;
  margin-bottom: 24px;
  border-radius: 24px;
  padding: 32px;
  color: #fff;
  transform-origin: top center;
}

被盖住的卡片缩小变暗

用下一张卡片离顶部的距离算出当前卡片被盖住了多少（0 到 1），按比例缩小和变暗，层次感就出来了。支持滚动驱动动画的浏览器可以用 view() 时间轴纯 CSS 实现；这里用脚本，兼容性更好。

查看代码js

const cards = [...document.querySelectorAll('.stack__card')];

function update() {
  cards.forEach((card, i) => {
    const next = cards[i + 1];
    if (!next) return;
    const gap = next.getBoundingClientRect().top - card.getBoundingClientRect().top;
    const covered = 1 - Math.min(1, Math.max(0, gap / card.offsetHeight));
    card.style.transform = `scale(${1 - covered * 0.06})`;
    card.style.filter = `brightness(${1 - covered * 0.25})`;
  });
}

window.addEventListener('scroll', () => requestAnimationFrame(update), { passive: true });
update();

适合放在哪

适合用

官网的「几步上手」「核心卖点」介绍区。
作品集里依次展示几个重点项目。
课程介绍页的章节概览。

不适合用

卡片超过五六张时别这样做；叠太多，用户要滚很久。
卡片里内容很多、需要滚动阅读时，别用堆叠；会被下一张盖住。
手机屏幕矮，堆叠卡片容易占满全屏；窄屏可以退回普通列表。

让 AI 帮你做复制给 AI Agent 直接用

请把【几张并列的介绍卡片，如：官网「四步上手」区块】做成滚动堆叠效果。先阅读这个区块的组件和样式，确认顶部导航栏高度，并检查卡片的祖先元素是否有 overflow: hidden/auto（会让 sticky 失效）。要求：每张卡片 position: sticky，top 为导航栏高度加上「序号 × 约 16px」；容器底部留足空白让最后一张能停住；滚动时按下一张卡片覆盖的程度把当前卡片缩小到约 0.94、亮度降到约 0.75，滚动监听用 passive 和 requestAnimationFrame；窄屏手机上退回普通列表；开启减少动效时不缩放。不改无关代码。最后说明怎样验证每张卡片都能正确停住。

用到的知识

吸顶定位滚动驱动动画卡片