搭骨架
粘性定位 vs 固定定位
Sticky vs Fixed
「滚到顶吸住」「一直钉在屏幕上」「吸顶栏」「悬浮按钮定位」「sticky 和 fixed 区别」
LIVE DEMO真实可交互，动手试试
定位演示
滚动内容区，对比 sticky 和 fixed。
产品信息流
Sticky 工具栏属于这块滚动内容，而右下角按钮更像全局悬浮操作。
Sticky 筛选栏
滚到顶部后吸住
筛选栏
Sticky 会先留在内容流里，滚到阈值后才吸住顶部。
灵感流
往下滚动内容区，可以看到筛选栏停在顶部边缘。
备注
右下角的客服按钮会始终停在可视区域里，不跟内容一起走。
发布清单
和当前区块强相关的控件更适合 sticky，全局操作更适合 fixed。
团队动态
如果父级开了错误的 overflow，sticky 往往会直接失效。
走查结果
Fixed 还要留意 z-index，否则容易被内容盖住。
- 英文名
- Sticky vs Fixed
- 别名 · 俗称
- 吸顶和固定跟着滚到顶再停一直贴屏幕上sticky / fixed
- Web 叫法
- position: sticky / fixed
- 大白话定义
- Sticky 是滚到某个位置后再吸住，Fixed 是从头到尾都钉在视口上。两者看起来都像“固定住了”，但触发时机完全不同。
- 部位拆解
- 滚动容器 Scroll ContainerSticky 只在自己的滚动上下文里生效
- 触发边界 Offset比如 top: 0，决定什么时候吸住
- 视口 ViewportFixed 直接相对视口定位
提示词已按当前平台组织好，复制粘贴给 AI 即可
Web
筛选栏用 sticky：滚到顶部后吸住；客服悬浮按钮用 fixed：始终固定在右下角，不跟内容一起走
调试 Prompt组件不听话时用——把症状补在末尾一起发给 AI
调试我的 Sticky / Fixed。逐一排除：sticky 的父容器开了 overflow 导致根本不生效；元素没有设置 top 偏移；fixed 层级太低被内容盖住；把应该 sticky 的导航做成 fixed 后，页面内容被挡住。症状是：