粘性堆叠卡片
Sticky Stacking Cards
滚动时后面的卡片一张张压上来，前一张缩小留在底下。
- 又叫：
- 卡片堆叠
- 叠卡片
- 滚动叠卡
- sticky stacking cards
- stacking cards
- card stack on scroll
- 展厅
- 布局与结构
- 形态
- 自带滚动
- 播放
- 手动触发
- 关键词
- 纯 CSS / 随滚动变化 / 合成层动画 / 动效较多 / 可以直接用
参数工作台
复制给 AI
随参数实时更新做一组滚动堆叠卡片（sticky stacking cards）：共 6 张，每张用 position: sticky，top 依次是「索引 × 18px」，后面的卡片 z-index 更高、滚上来时盖住前一张；被压住的卡片用 transform: scale() 缩到 95%，transform-origin 设 top center，圆角 14px。整组放在一个 overflow-y: auto 的容器里，容器外面的祖先不要加 overflow: hidden。系统开启「减少动态效果」时取消缩放。
sticky stacking cards, position: sticky with top: index * 18px, 6 cards, increasing z-index 1 2 3, previous card scales down to 95% via transform: scale() with transform-origin: top center, border-radius: 14px, inside an overflow-y: auto scroll container, no overflow: hidden on ancestors, disable the scale under prefers-reduced-motion
https://publieople.github.io/design-museum/entry/sticky-stack/?stage=light
链接带着你调好的参数
什么时候用
- 教程、步骤、结账流程：一张卡讲一件事，滚完一张再翻下一张
- 长页面里想做出「一摞卡片」的实感，而不是一条平铺的列表
- 卡片需要依次进入视野，同时把上一张留在原位当上下文
适用场景：滚动 / 页面 / 卡片
推荐取值
- 每张露头高度
- 12–24px
- 已堆叠卡片缩到
- 92%–97%
- 卡片圆角
- 12–16px
- 卡片间距
- 8–12px
- z-index
- 按索引递增 1、2、3…
别搞混
和「粘性头部」的区别
粘性头部只有一条栏吸附在顶部；粘性堆叠是一叠卡片共用同一个吸附位置，后滚上来的那张盖住先来的那张。
容易混的去看「粘性头部」
和「轮播 carousel」的区别
轮播会自己定时切页、靠左右方向推进；粘性堆叠完全由页面上下滚动驱动，不动手就不换。
和「视差 parallax」的区别
视差是各层以不同速度移动，元素之间并不会停住；堆叠卡片会真的吸附在固定位置并互相覆盖。
容易踩的坑
- 每张卡片都要有各自的 top（第 i 张用 i × 露头高度），全给 0 就变成严丝合缝的一摞，看不出层数
- 后面的卡片 z-index 必须比前面的高，否则新卡片会被旧卡片盖住
- 滚动容器自己可以有 overflow: auto，但它的任意一层祖先带了 overflow: hidden，sticky 就失效
- 用 transform: scale() 压小已堆叠的卡片时，缩放原点设 top center，否则底部会露出下一张的边
- 卡片总高度要明显超过滚动容器，内容不够长就没有可滚的余量，堆叠也演不出来
无障碍降级
堆叠由滚动位置驱动，不是时间动画，可以保留；压在后面的缩放属于装饰，prefers-reduced-motion: reduce 时去掉缩放，只留吸附堆叠。
关键词
- position: sticky
- stacking cards
- z-index
- transform: scale()
- sticky offset
- scroll container