fixed导航栏遮挡内容是因为其脱离文档流导致后续元素上移，应给首个内容容器（如）设margin-top等于导航栏实际高度，并用CSS变量管理；锚点跳转遮挡需用scroll-margin-top解决。
fixed导航栏为什么一加就遮内容
因为 position: fixed 让元素彻底脱离文档流，它原本占的位置瞬间“消失”，后面的内容立刻上移补位——不是样式没生效，是布局逻辑本身如此。你看到的遮挡，其实是内容回到了导航栏「曾经在的地方」，而导航栏现在浮在视口顶部盖住了它。
给谁加 margin-top / padding-top 才对
别直接改 body 的 margin-top，容易和全局重置冲突；也别只靠 JS 算高度，增加不必要依赖。最稳做法是：给紧接在 <nav></nav> 后的第一个内容容器（比如 <main></main> 或 <div class="content">）加 <code>margin-top。
-
margin-top作用于内容块自身，不影响父容器滚动行为，IntersectionObserver、scrollHeight都能正常工作 - 值必须等于导航栏的「实际占用高度」，不是
height: 60px就完事——要包含padding、border、阴影撑开的空间 - 响应式场景下，用 CSS 变量动态管理：
:root { --nav-height: 64px; }，然后main { margin-top: var(--nav-height); } - 避免写
body { padding-top: 64px; }，尤其当页面有min-height: 100vh时，会导致底部留白或视口计算错乱
scroll-margin-top 是解决跳转遮挡的关键
即使导航栏位置固定、内容区预留了空间，用户点击锚点链接（如 #section-2）跳转时，目标元素仍可能被遮住——因为 scrollIntoView() 默认把元素顶边对齐视口顶部，没考虑 fixed 导航栏。
- 给所有可跳转的目标区块加
scroll-margin-top，值略大于导航栏高度，例如scroll-margin-top: 68px - 这个属性只影响滚动定位行为，不改变布局，也不触发重排，性能友好
- 不支持旧版 Safari（scrollIntoView({ block: 'start', behavior: 'smooth' }) 并手动偏移
移动端 bottom 安全区和 resize 陷阱
iOS Safari 在地址栏收起/展开时会改变 window.innerHeight，但不会重绘 fixed 元素，也不会自动更新你写死的 margin-top 值。硬编码 64px 在横竖屏切换或地址栏变化后大概率不准。
立即学习“前端免费学习笔记（深入）”；
- 优先用
env(safe-area-inset-top)处理刘海屏和顶部安全区，但注意它只在有物理遮挡时才有值，不能替代导航栏高度 - 如果导航栏高度本身响应式（比如字体随
rem缩放），建议用getBoundingClientRect().height在resize后更新 CSS 变量，而不是监听 scroll - 侧边栏 + 顶部导航同时 fixed 时，侧边栏要用
calc(100vh - var(--nav-height))控制高度，否则底部会被截断
真正麻烦的从来不是怎么写 position: fixed，而是导航栏高度是否稳定、跳转是否精准、移动端视口是否可信——这三个点任何一个飘了，整个固定导航体验就塌一半。
