Sticky Bar
粘性悬浮栏
随页面滚动到阈值后自动吸附在视口顶部或底部的导航与操作条。
Live Demo
真的可以点Configure build settings and environmental variables before deployment.
Automated continuous integration triggers static SSG exports.
你刚才看到的这个：长文章向下滚动数屏后，网页顶栏半透明毛玻璃吸附在屏幕最顶端，里面带当前章节进度条；在手机电商页滑到底部时，底部的「立即购买」按钮牢牢吸在屏幕下方。
它到底是什么
粘性悬浮栏利用 position: sticky 保留了元素在自然文档流中的占位，当用户滚动页面离开初始视口时，它会优雅吸附在屏幕边缘。它既不会像 position: fixed 那样野蛮遮挡页面初始内容，又能在用户沉浸式浏览数屏长内容后，随时提供全局导航、搜索或关键购买行动（CTA）。
Anatomy · 它由什么组成
Sticky Anchor粘性定位锚点
position: sticky; top: 0
Backdrop Blur毛玻璃半透层
backdrop-blur-md 与半透明底色
Scroll Shadow滚动感知微投影
离开顶部时浮现微妙阴影
Action Elements核心操作控件
Logo、快速导航或购买 CTA
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 长落地页中的核心全局导航栏（带毛玻璃背景） | 用 |
| 移动端电商商品详情页的底部常驻购买/加入购物车栏 | 用 |
| 长表单或审批页底部的保存/提交确认条 | 用 |
| 页面高度非常短、一屏就能看全的极简页面（纯属多余代码） | 不用 |
| 父容器设置了 overflow: hidden（会导致 CSS sticky 吸附失效） | 不用 |
在祖先节点上设置了 overflow: hidden，导致 CSS sticky 彻底失效却排查半天。
吸顶栏高度过大（比如超过 100px），在移动端占去近 1/4 的可视高度，让用户无法阅读正文。
Similar Patterns
别搞混Sticky Bar当前
粘性悬浮栏
随页面滚动到阈值后自动吸附在视口顶部或底部的导航与操作条。
Sidebar App Shell
应用侧栏架构
左侧常驻导航侧栏、右侧主工作台独立滚动的现代桌面与 Web 应用骨架。
一句话区分：随页面滚动到阈值后自动吸附在视口顶部或底部的导航与操作条。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
制作吸顶毛玻璃导航条：在滚动时固定在顶部（sticky top-0），背景为 80% 白底配合 12px 高斯模糊，带 1px 浅灰底边，Z 轴层级高于正文。
不要只对 AI 说
Bad → Better不要这样对 AI 说
让菜单一直漂在上面。
改成这样说
使用 CSS sticky 实现吸顶导航：sticky top-0 z-40 w-full backdrop-blur-md bg-surface/85 border-b border-line/60，父容器保持 overflow-visible，滚动时呈现柔和微阴影。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。