根本原因是 fixed 元素的包含块被 transform/perspective/filter/will-change 等属性改变，导致其相对于最近的定位上下文而非视口定位；需检查祖先元素并修正。
position: fixed 为什么导航栏一滚动就消失或错位
根本原因不是 position: fixed 写错了，而是它脱离文档流后，父容器的 padding、transform 或 will-change 会干扰定位基准。尤其当导航栏包在 header 里，而 header 又被设置了 transform: translateY(0)（常见于动画库或 UI 框架），fixed 就会相对于这个 transform 容器定位，而非视口。
- 检查祖先元素是否含
transform、perspective、filter或will-change: transform—— 任一存在都会创建新的“包含块”，让fixed失效 - 用浏览器开发者工具选中导航栏，看“Computed”面板里的
position和top是否按预期解析；若top: 0却没贴顶，大概率是包含块问题 - 临时加
body { transform: none !important; }测试是否恢复，确认后针对性移除或重构祖先样式
fixed 导航栏遮挡下方内容怎么办
position: fixed 不占空间，后面的内容会直接顶到页面顶部，造成文字被盖住。这不是 bug，是规范行为，必须手动补偿。
- 给
body或紧接导航栏后的主容器加padding-top，值等于导航栏高度（例如padding-top: 60px） - 避免用
margin-top，因为 margin 会被折叠，且对 flex/grid 子项不总生效 - 如果导航栏高度响应式变化（如移动端变矮），用 CSS 自定义属性 +
calc()更稳妥：body { padding-top: calc(var(--navbar-height, 60px)); }
移动端 fixed 定位卡顿或闪动
iOS Safari 和部分安卓 WebView 对 fixed 元素滚动优化差，尤其配合 overflow: scroll 的区域时，容易触发重绘抖动或输入框聚焦后定位偏移。
- 强制开启硬件加速：给导航栏加
transform: translateZ(0)或will-change: transform（但别滥用，会增加内存占用） - 避免在
fixed元素内使用background-attachment: fixed或大量阴影/渐变，这些在滚动时触发全层重绘 - 测试输入框弹出软键盘时是否错位——iOS 下可加
viewportmeta 的height=device-height缓解，但更可靠的是监听resize事件动态调整top
如何让 fixed 导航栏在特定区域才置顶（比如只在文章正文滚动时生效）
CSS 本身不支持“条件 fixed”，必须靠 JS 监听滚动位置并切换 class。关键不是加不加 fixed，而是控制何时激活。
立即学习“前端免费学习笔记（深入）”；
- 用
getBoundingClientRect()判断导航栏是否即将滚出视口顶部：if (nav.getBoundingClientRect().bottom 再添加 <code>.is-sticky类 - 不要在
scroll事件里直接改style.position，优先用 class 切换，CSS 中写：.is-sticky { position: fixed; top: 0; width: 100%; z-index: 1000; } - 注意滚动节流——用
requestAnimationFrame包一层判断逻辑，否则快速滚动时频繁计算导致掉帧
最易被忽略的一点：fixed 元素的 z-index 必须显式设置，且确保没有父容器用了 transform 或 opacity 创建了新的层叠上下文，否则它可能被同级其他元素盖住，连调试都看不出问题。
