sticky未触发时占位，fixed一设即脱离文档流；sticky依赖可滚动祖先且仅单向定位，fixed绑定视口、支持多向偏移；移动端sticky更稳定，fixed易卡顿错位。
sticky 未触发时仍占位，fixed 一设就消失
这是最直接影响布局的差异。给一个 .header 加 position: sticky; top: 0，它在滚动前和普通块级元素一样撑高父容器、影响兄弟元素位置；而加 position: fixed; top: 0 后，原始位置立刻“塌陷”，下面的内容直接上移——你甚至可能看到页面突然跳动。
常见错误现象：.nav 加了 sticky，但滚动后内容“跳了一下”——大概率不是 sticky 失效，而是父容器高度塌陷（比如没清浮动、没设 min-height），或者兄弟元素用了 margin-top 被重排。fixed 则不存在这种“过渡态”，它从声明那一刻起就脱离文档流。
sticky 只在滚动祖先内生效，fixed 始终绑定视口
sticky 的行为严格依赖最近的可滚动祖先：如果 .sidebar 放在一个 div 里，而该 div 有 overflow-y: auto; height: 400px，那 sticky 就只在这个 div 内部吸附；一旦滚出这个区域，它自动退回 relative 行为。fixed 不管嵌套多深，哪怕在 iframe 里，都死死钉在视口坐标上。
这意味着：
- 用 sticky 做表格表头，
tbody滚动时它自然进出吸附状态，无需 JS 监听 - 用 fixed 实现同样效果，得手动算
offsetTop、监听scroll、判断是否进入视区，维护成本高 - iOS Safari 对
overflow: hidden特别敏感——只要 sticky 元素的任意一个祖先写了它，sticky 就直接失效
sticky 只能单向指定阈值，fixed 可自由组合偏移
sticky 必须且只能写 top、bottom、left、right 中的一个，比如 top: 10px 或 left: 20px；同时写 top 和 left，整个声明会被浏览器忽略。fixed 则无此限制，top: 10px; left: 20px; 是完全合法的。
所以：
- sticky 更适合单边吸附场景：顶部导航、左侧目录、表格表头
- fixed 更适合精确定位：右下角悬浮按钮、带偏移的 tooltip、模态框遮罩层
- 想让 sticky 元素“既贴顶又靠右”，得靠父容器 padding 或 flex 布局配合，不能硬塞两个方向的定位值
移动端表现差异大：sticky 更稳，fixed 更卡
在 iOS Safari 和部分安卓 WebView 中，fixed 元素常出现滚动卡顿、输入框聚焦时错位、地址栏收起后定位偏移等问题——因为其强绑定视口的机制与原生滚动优化存在冲突。sticky 因为始终依附于局部滚动容器，在这些场景下更稳定。
但要注意：
- 不要指望 sticky 在
body上直接滚动生效（iOS 上body滚动常被降级处理） - 滚动容器必须是明确的
div，且需有height或max-height + overflow-y: auto，不能只靠overflow: scroll - 某些旧版 Chromium（如 2026 年前的版本）中，sticky 在
transform: translateZ(0)强制硬件加速的容器里会失效
真正容易被忽略的是：sticky 的“粘性”不是 CSS 自己算出来的，它完全依赖滚动容器的尺寸和溢出行为。很多问题其实出在父容器没撑开、中间祖先加了 overflow: hidden、或者误以为它能像 fixed 那样跨容器定位——这些地方一错，sticky 就静默失效，连报错都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
