SCROLL EFFECT
粘性滚动叙事Sticky Scroll Storytelling
一侧画面钉在屏幕上不动，另一侧文字随滚动逐段推进，讲一个三幕式的故事。
效果预览
① 连接数据源
两分钟接入你的工具栈
两分钟接入你的工具栈
② 自动清洗归一
脏数据自动变成标准格式
脏数据自动变成标准格式
③ 生成洞察报告
每天早上八点准时送达
每天早上八点准时送达
画面钉在这里
右栏 sticky · 左栏滚动推进
右栏 sticky · 左栏滚动推进
适合用在哪
产品工作原理讲解、里程碑回顾、数据报告页。
容易踩的坑
- 父级设置了 overflow:hidden，position:sticky 直接失效，右栏画面跟着滚走。
- 移动端仍保持左右两栏，屏幕过窄时文字和画面都被挤得无法阅读，应改为上下堆叠。
- 步骤超过 5 段且每段 80vh，用户滚动很久都看不到结尾，中途流失。
设计提示词 · Prompt
粘性滚动叙事（Sticky Scroll Storytelling）：外层 CSS Grid 两栏；左栏文字流正常滚动，每个步骤是一个 80vh 高的段落；右栏 position:sticky; top:15vh 钉住一帧视觉画面。用 IntersectionObserver 监听左侧各步骤进入视口中线，切换右栏画面的内容（交叉淡入淡出）并高亮当前步骤。文字步骤最多 3-5 段，每段一句话大标题 + 两行说明。这个故事结构是"画面不动、文字走"，和轮播的根本区别是用户掌控节奏。
Sticky Scroll Storytelling: outer CSS Grid with two columns; the left column's text flows and scrolls normally, with each step being an 80vh-tall section; the right column pins one visual frame with position:sticky; top:15vh. Use IntersectionObserver to detect each left-side step crossing the viewport midline, switch the right-column visual content (crossfade) and highlight the current step. At most 3-5 text steps, each with a one-sentence large headline + two lines of description. This story structure is "the visual stays, the text moves"; the fundamental difference from a carousel is that the user controls the pace.
常见搭配
同一页面里经常和「粘性滚动叙事」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-story">
<div class="d-story__left">
<div class="d-story__step is-on">① 连接数据源<br>两分钟接入你的工具栈</div>
<div class="d-story__step">② 自动清洗归一<br>脏数据自动变成标准格式</div>
<div class="d-story__step">③ 生成洞察报告<br>每天早上八点准时送达</div>
</div>
<div class="d-story__stage">画面钉在这里<br><span style="font-size:9px;font-weight:500;opacity:.85">右栏 sticky · 左栏滚动推进</span></div>
</div>