Before Stack Section

页面上方普通内容区

这一块模拟真实页面中堆叠卡片前面的内容。向下滚动后，会进入中间的 Sticky Stack Cards 区域，卡片会开始一张张吸附并错层堆叠。

Middle Stack Section

滚动堆叠卡片区域

这整个模块已经被放进一个独立的 section 中。继续向下滚动时，卡片会在这个 section 内部完成吸附、覆盖和错层；离开这个 section 后，页面会正常进入下方内容区。

Section 01

使用粘性定位让当前卡片在滚动到指定位置后停留，后续卡片继续向上滚动并覆盖到它之上，从而形成层叠效果。

Section 02

每张卡片都保留在正常文档流中，所以向上滚动时不会突兀，而是自然地一张张从顶部“解叠”并展开。

Section 03

通过给每张卡片设置一个轻微递增的顶部停靠值，可以保留前一张卡片的部分边缘，增强“错层感”。

Section 04

电脑端采用图文左右布局，移动端自动切换为上下结构，让卡片内容更易阅读，同时保留堆叠的滚动体验。

After Stack Section

当你滚动到这里时，说明中间的堆叠卡片区域已经结束。再向上滚动时，卡片会从底部 section 返回到中间 section，并依次展开。