position: sticky才是响应式吸顶的正确选择，但需确保父容器有可计算高度；fixed会导致内容上蹿，需手动补偿padding-top，且响应式下易出错。
Fixed吸顶会导致导航栏脱离文档流，页面内容会“上蹿”
用 position: fixed 实现吸顶时，导航栏被强制脱离正常布局流，浏览器会直接把它“拎”到视口顶部。结果是：原本紧贴导航栏下方的 main 或 .content 区域瞬间失去参照，向上塌陷——就像抽掉了一块积木，整个页面内容往上跳一截。
常见错误现象包括：
- 页面首次加载时内容“闪动”或“跳变”
- 滚动后返回顶部，内容区域位置错乱
- 导航栏遮挡原页面顶部内容（尤其未预留
padding-top）
必须手动给主体内容加等高内边距来补偿，比如：body { padding-top: 60px; }（假设导航高60px）。但这个值在响应式中会随屏幕缩放变化——手机端导航可能折叠成汉堡菜单、高度变成52px，而平板又可能是56px，硬编码极易出错。
Sticky才是响应式吸顶的正确选择，但必须满足父容器有高度
position: sticky 的行为本质是“有条件的 relative + fixed”：它在父容器内正常占位，只在滚动到临界点（如 top: 0）时才临时固定。关键前提是：它的父元素必须有可计算的高度，且不能是 height: auto 且无内容撑开的空容器。
立即学习“前端免费学习笔记（深入）”；
典型翻车场景：
- 导航栏包裹在
<header></header>里，而<header></header>是 flex 容器但没设min-height，导致 sticky 失效 - 父容器用了
display: grid但没定义行高，sticky 元素“找不到边界” - 导航栏本身是
display: flex，但子项用flex: 1撑宽，导致父容器无法正确测量高度
实操建议：
- 给导航栏直接父容器加
height: fit-content或min-height: 60px - 避免让 sticky 元素的父级是
position: absolute或display: contents - 在移动端，若导航折叠后高度变化，确保父容器能重绘高度（例如用
max-height+transition而非display: none）
Sticky的兼容性与回退方案要写在CSS里，别靠JS补
position: sticky 在 Chrome 56+、Firefox 59+、Safari 13.1+ 均原生支持，但 iOS Safari 12.x 及更早版本不支持，且 Android UC 浏览器仍有少量问题。不能靠 JS 动态判断并切换 fixed —— 那会引发布局抖动和监听开销。
推荐纯 CSS 回退：
- 先写
position: -webkit-sticky和position: sticky，现代浏览器优先走 sticky - 再用
@supports not (position: sticky)包裹 fallback 规则，里面写position: fixed+ 补偿内边距 - 注意：
@supports不支持 IE，但 IE 本来就不支持 sticky，所以 fallback 规则对 IE 也生效，需额外加@media screen and (-ms-high-contrast: active)或条件注释隔离（如果还要兼容 IE）
示例片段：
nav {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 100;
}
@supports not (position: sticky) {
nav {
position: fixed;
top: 0;
}
body {
padding-top: 60px;
}
}
移动端触摸滚动时 Sticky 卡顿？检查 overscroll-behavior
在 iOS Safari 和部分安卓浏览器中，启用 position: sticky 后快速滚动可能出现“粘滞感”或延迟吸附，根本原因是浏览器默认开启了滚动穿透（overscroll），触发了弹性回弹动画，干扰了 sticky 的临界判断时机。
解决方法很简单：在导航栏父容器或 html/body 上加 overscroll-behavior-y: contain：
- 阻止滚动事件溢出到父层（比如防止下拉刷新干扰 sticky）
- 显著提升 sticky 吸附响应速度，尤其在手指拖拽滚动时
- 不影响内部内容滚动，只约束容器边界行为
注意不要全局加在 body 上，否则下拉刷新会被禁用；应精确作用于导航所在容器，例如：.header-wrapper { overscroll-behavior-y: contain; }。
吸顶看着简单，真正稳的关键不在“怎么写”，而在“谁包着它”“它包着谁”“滚动时谁在动”。Sticky 不是 fixed 的语法糖，它是布局上下文敏感的定位模式——漏掉一个父容器的高度约束，整套响应式就失效。
