CONVERSION CTA
底部悬浮 CTA 条Sticky Bottom CTA Bar
商品信息 + 价格 + 购买按钮悬浮在底部，滚多远都能一键购买。
效果预览
山系帆布双肩包¥299 · 限时 -30%
适合用在哪
商品详情页、长落地页、课程销售页、App 下载页。
容易踩的坑
- 没有给页面底部留出等高 padding，最后一段内容和页脚被悬浮条永久遮住。
- iOS 未用 env(safe-area-inset-bottom)，按钮被 Home 指示条压住难以点击。
- 与底部 Cookie 条或客服气泡同时出现，三层叠在一起挡掉 30% 以上视口。
设计提示词 · Prompt
底部悬浮 CTA 条（Sticky Bottom CTA Bar）：固定在视口底部，毛玻璃白底（rgba(255,255,255,.9) + blur 14px）+ 顶部 1px 描边。左侧：商品缩略图 + 名称 + 价格；右侧：主购买按钮。滚动过首屏后才滑入（scrollY > 600 触发，translateY(100%)→0）。移动端改为两行——上行信息、下行全宽按钮。关闭按钮要给（用户可能只想安静阅读），关闭后本次会话不再出现。出现时机要避开用户正在操作的区域。
Sticky Bottom CTA Bar: fixed to the bottom of the viewport, frosted white background (rgba(255,255,255,.9) + blur 14px) + a 1px top border. Left: product thumbnail + name + price; right: primary purchase button. Slide in only after scrolling past the first screen (trigger at scrollY > 600, translateY(100%)→0). On mobile switch to two rows — info on top, full-width button below. Provide a close button (users may just want to read quietly); once closed, don't show it again for the session. Time its appearance to avoid the area the user is currently interacting with.
常见搭配
同一页面里经常和「底部悬浮 CTA 条」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s s--abs" style="background:linear-gradient(180deg,#f4f4f7,#e9eaef)">
<div class="d-stickycta">
<span class="d-img d-img--warm" style="width:30px;height:30px"></span>
<div class="d-stickycta__txt"><b>山系帆布双肩包</b><span>¥299 · 限时 -30%</span></div>
<span class="d-spacer"></span>
<button class="d-btn d-btn--p d-btn--sm">立即购买</button>
</div>
</div>