{"id":50709227,"url":"https://github.com/coowinit/sticky-stacked-cards-section","last_synced_at":"2026-06-09T14:01:46.345Z","repository":{"id":360647009,"uuid":"1251078831","full_name":"coowinit/sticky-stacked-cards-section","owner":"coowinit","description":"一个基于 CSS position: sticky 实现的滚动错层堆叠卡片页面示例，包含上下普通 section，用于测试卡片区在完整页面中的滚动进入、堆叠和离开效果。","archived":false,"fork":false,"pushed_at":"2026-05-27T08:26:48.000Z","size":114,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-27T10:16:14.414Z","etag":null,"topics":["css-sticky","html-css-js","responsive-layout","scroll-animation","scroll-effect","stacked-cards","sticky-cards"],"latest_commit_sha":null,"homepage":"https://coowinit.github.io/sticky-stacked-cards-section/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coowinit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-27T08:15:58.000Z","updated_at":"2026-05-27T08:26:53.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/coowinit/sticky-stacked-cards-section","commit_stats":null,"previous_names":["coowinit/sticky-stacked-cards-section"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/coowinit/sticky-stacked-cards-section","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fsticky-stacked-cards-section","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fsticky-stacked-cards-section/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fsticky-stacked-cards-section/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fsticky-stacked-cards-section/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coowinit","download_url":"https://codeload.github.com/coowinit/sticky-stacked-cards-section/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Fsticky-stacked-cards-section/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34110012,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-sticky","html-css-js","responsive-layout","scroll-animation","scroll-effect","stacked-cards","sticky-cards"],"created_at":"2026-06-09T14:01:45.532Z","updated_at":"2026-06-09T14:01:46.332Z","avatar_url":"https://github.com/coowinit.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sticky Stacked Cards Section\n\n一个基于 **HTML + CSS + JavaScript** 实现的滚动错层堆叠卡片页面示例。\n\n页面结构包含：\n\n- 上方普通内容 Section\n- 中间 Sticky 错层堆叠卡片 Section\n- 下方普通内容 Section\n\n这样可以更直观地观察：当页面从上方内容滚动进入中间堆叠区域、卡片逐张叠加、再滚动离开到下方内容区域时，整体页面的滚动表现。\n\n---\n\n## 效果预览\n\n![Sticky Stacked Cards Preview](docs/screenshots/sticky-stacked-cards-preview.png)\n\n---\n\n## 项目特点\n\n- 使用 `position: sticky` 实现滚动吸附效果\n- 多张卡片向下滚动时依次叠加\n- 向上滚动时卡片依次展开\n- 每张卡片拥有独立的错层偏移，视觉上更有层次感\n- 使用 `z-index` 控制后续卡片覆盖前一张卡片\n- 上下增加普通 Section，方便测试嵌入完整页面后的效果\n- 图片使用本地 SVG 占位图，无需依赖外部图片资源\n- CSS、JS、图片资源分目录管理，便于后续维护\n- 支持响应式布局，适配桌面端和移动端\n\n---\n\n## 页面结构说明\n\n当前页面主要分为三部分：\n\n```text\nTop Section\n普通页面内容，用于测试进入堆叠区域前的滚动效果\n\nSticky Stack Section\n核心错层堆叠卡片区域\n\nBottom Section\n普通页面内容，用于测试离开堆叠区域后的滚动效果\n```\n\n核心效果位于中间的堆叠卡片 Section 中。\n\n---\n\n## 目录结构\n\n```text\nsticky-stacked-cards-section/\n├── index.html\n├── assets/\n│   ├── css/\n│   │   └── style.css\n│   ├── js/\n│   │   └── main.js\n│   └── images/\n│       ├── placeholder-1.svg\n│       ├── placeholder-2.svg\n│       ├── placeholder-3.svg\n│       └── placeholder-4.svg\n└── docs/\n    └── screenshots/\n        └── sticky-stacked-cards-preview.png\n```\n\n说明：\n\n- `index.html`：页面 HTML 结构\n- `assets/css/style.css`：页面样式和 sticky 堆叠逻辑\n- `assets/js/main.js`：简单滚动状态脚本\n- `assets/images/`：SVG 占位图片\n- `docs/screenshots/`：GitHub README 预览截图目录\n\n---\n\n## 核心实现原理\n\n该效果的核心是 CSS 的 `position: sticky`。\n\n每张卡片都保留在正常文档流中，当它滚动到指定位置时，会暂时吸附在视口顶部附近。继续向下滚动时，下一张卡片会继续向上移动，并覆盖到上一张卡片之上，从而形成层叠效果。\n\n核心 CSS 思路如下：\n\n```css\n.stack-card {\n  position: sticky;\n  top: calc(var(--sticky-top) + var(--stack-offset, 0px));\n  z-index: var(--z, 10);\n}\n```\n\n每张卡片通过内联 CSS 变量控制自己的错层偏移和层级：\n\n```html\n\u003carticle class=\"stack-card\" style=\"--stack-offset: 0px; --z: 10;\"\u003e\u003c/article\u003e\n\u003carticle class=\"stack-card\" style=\"--stack-offset: 18px; --z: 11;\"\u003e\u003c/article\u003e\n\u003carticle class=\"stack-card\" style=\"--stack-offset: 36px; --z: 12;\"\u003e\u003c/article\u003e\n\u003carticle class=\"stack-card\" style=\"--stack-offset: 54px; --z: 13;\"\u003e\u003c/article\u003e\n```\n\n这样每张卡片都会比上一张卡片向下错开一定距离，视觉上可以看到前一张卡片的边缘，形成更明显的错层效果。\n\n---\n\n## 为什么要给每张卡片单独设置偏移量？\n\n最初可以使用下面这种方式计算错层位置：\n\n```css\n.top: calc(var(--sticky-top) + (var(--index) * var(--stack-gap)));\n```\n\n但在实际使用中，CSS 变量参与乘法计算时不够稳定，部分场景下可能出现最后一张卡片停靠位置异常的问题。\n\n因此当前版本改为直接给每张卡片设置明确的偏移量：\n\n```html\nstyle=\"--stack-offset: 54px;\"\n```\n\n这种方式更加直观，也更便于后续在 WordPress、PHP 循环或其他模板系统中输出。\n\n---\n\n## 底部占位空间的作用\n\n最后一张 sticky 卡片如果没有足够的滚动空间，可能会受到父容器边界影响，导致停靠位置不自然。\n\n因此在堆叠卡片区域底部增加了一个占位元素：\n\n```html\n\u003cdiv class=\"stack-bottom-spacer\" aria-hidden=\"true\"\u003e\u003c/div\u003e\n```\n\n对应 CSS：\n\n```css\n.stack-bottom-spacer {\n  height: clamp(180px, 34vh, 360px);\n}\n```\n\n它的作用是给最后一张卡片提供足够的滚动空间，让最后一张卡片也能完整完成 sticky 停靠效果。\n\n---\n\n## 使用方法\n\n### 1. 直接打开页面\n\n下载项目后，直接用浏览器打开：\n\n```text\nindex.html\n```\n\n即可查看效果。\n\n### 2. 上传到网站目录\n\n将整个项目上传到服务器或网站目录中，保持以下目录关系不变：\n\n```text\nindex.html\nassets/css/style.css\nassets/js/main.js\nassets/images/*.svg\n```\n\n### 3. 嵌入到现有页面\n\n如果要把中间的堆叠效果嵌入到现有页面中，可以重点复制：\n\n- `stack-showcase` 或对应的中间堆叠区域 HTML\n- `.stack-section`\n- `.stack-list`\n- `.stack-card`\n- `.stack-bottom-spacer`\n- 相关 CSS 变量和响应式样式\n\n---\n\n## 自定义配置\n\n### 修改卡片吸附位置\n\n在 CSS 中修改：\n\n```css\n:root {\n  --sticky-top: 54px;\n}\n```\n\n数值越大，卡片停靠位置越靠下。\n\n---\n\n### 修改错层间距\n\n每张卡片的错层间距由内联变量控制：\n\n```html\nstyle=\"--stack-offset: 18px;\"\n```\n\n例如：\n\n```html\n第一张：--stack-offset: 0px;\n第二张：--stack-offset: 18px;\n第三张：--stack-offset: 36px;\n第四张：--stack-offset: 54px;\n```\n\n如果想要更明显的错层，可以改为：\n\n```html\n0px / 24px / 48px / 72px\n```\n\n---\n\n### 修改卡片覆盖顺序\n\n通过 `--z` 控制层级：\n\n```html\nstyle=\"--z: 13;\"\n```\n\n通常后面的卡片应该拥有更高的 `z-index`，这样向下滚动时，后面的卡片会覆盖前面的卡片。\n\n---\n\n### 替换图片\n\n当前图片为 SVG 占位图：\n\n```text\nassets/images/placeholder-1.svg\nassets/images/placeholder-2.svg\nassets/images/placeholder-3.svg\nassets/images/placeholder-4.svg\n```\n\n可以替换为真实图片，例如：\n\n```text\nassets/images/card-1.jpg\nassets/images/card-2.jpg\nassets/images/card-3.jpg\nassets/images/card-4.jpg\n```\n\n然后在 HTML 中修改图片路径即可。\n\n---\n\n## 响应式说明\n\n桌面端：\n\n- 卡片采用左右双栏布局\n- 左侧为标题、说明和要点\n- 右侧为图片区域\n\n移动端：\n\n- 卡片自动变为上下结构\n- 图片区域移动到文字上方\n- 卡片内边距、圆角、文字大小会自动调整\n\n核心响应式逻辑：\n\n```css\n@media (max-width: 991px) {\n  .stack-card__content {\n    grid-template-columns: 1fr;\n  }\n\n  .stack-card__media {\n    order: -1;\n  }\n}\n```\n\n---\n\n## 注意事项\n\n### 1. 不要给 sticky 的父级设置 overflow hidden\n\n如果给 sticky 卡片的父级设置：\n\n```css\noverflow: hidden;\n```\n\n可能会导致 `position: sticky` 失效或显示异常。\n\n如果确实需要裁切圆角，建议只在卡片内部内容层上处理，不要直接裁切 sticky 外层父容器。\n\n---\n\n### 2. sticky 需要足够的滚动空间\n\n如果页面内容太短，sticky 效果会不明显。\n\n所以本项目在堆叠区域前后都增加了普通 Section，并在堆叠区域底部增加了占位空间，用来确保效果完整展示。\n\n---\n\n### 3. 后续接入 WordPress 时建议使用循环变量\n\n如果后续接入 WordPress，可以在循环时输出：\n\n```php\n\u003carticle class=\"stack-card\" style=\"--stack-offset: \u003c?php echo $offset; ?\u003epx; --z: \u003c?php echo $z_index; ?\u003e;\"\u003e\n  ...\n\u003c/article\u003e\n```\n\n这样每张卡片都可以自动获得不同的错层偏移和层级。\n\n---\n\n## 适用场景\n\n该效果适合用于：\n\n- 官网首页功能介绍区\n- 产品优势展示区\n- 服务流程展示区\n- 案例展示页面\n- 品牌故事页面\n- SaaS 落地页\n- 高端产品宣传页\n- 滚动叙事型页面\n\n---\n\n## 后续扩展方向\n\n后续可以继续扩展：\n\n- 增加卡片滚动缩放效果\n- 增加透明度渐变效果\n- 增加图片轻微视差动画\n- 增加 GSAP ScrollTrigger 版本\n- 改造成 WordPress 循环输出模板\n- 改造成 Elementor HTML 小工具版本\n- 增加更多卡片数量和真实内容案例\n- 增加暗色模式版本\n\n---\n\n## 版本记录\n\n### v1.0.0\n\n首个正式版本。\n\n完成内容：\n\n- 新增 Sticky 错层堆叠卡片效果\n- 新增上方普通 Section\n- 新增中间堆叠卡片 Section\n- 新增下方普通 Section\n- 使用 SVG 占位图片\n- 分离 CSS、JS、图片资源目录\n- 优化桌面端和移动端响应式布局\n- 修复最后一张卡片停靠位置异常的问题\n- 增加底部占位空间，保证最后一张卡片 sticky 效果自然完成\n\n---\n\n## License\n\n本项目为前端效果演示示例，可根据实际项目需求自由修改和扩展。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoowinit%2Fsticky-stacked-cards-section","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoowinit%2Fsticky-stacked-cards-section","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoowinit%2Fsticky-stacked-cards-section/lists"}