用 position: fixed 实现导航栏始终停在视口顶部，需设置 top: 0、width: 100vw、z-index: 1000 和 box-sizing: border-box，并为 body 添加等于导航高度的 padding-top，同时注意移动端 viewport 设置与 ios safari 视口抖动问题。
fixed定位让导航栏始终停在视口顶部
用 position: fixed 是实现滚动时导航栏不随页面移动的最直接方式。它脱离文档流，以浏览器视口为参考系定位，所以只要设好 top: 0 和 left: 0（或 right: 0），就能稳稳贴在顶部。
必须设置宽度和z-index才能正常显示
fixed元素默认宽度是内容宽度，容易被压缩成“一条线”；同时它可能被后续内容遮盖。这两个问题很常见，但新手常忽略：
-
width: 100%或width: 100vw（后者更准，避免滚动条导致的偏移） -
z-index: 1000（数值要足够大，避开其他组件的 z-index 冲突） - 别漏掉
box-sizing: border-box，否则 padding/margin 可能撑破宽度
body内容会“顶上去”，需要预留导航高度
因为 fixed 元素已脱离文档流，下方内容会直接从页面顶部开始渲染，导致首屏内容被导航栏盖住。解决方法不是给导航加 margin，而是给 body 或第一块内容加 margin-top 或 padding-top：
- 值应等于导航栏的
height（比如60px） - 若导航高度响应式变化（如移动端变矮），用 css 变量 +
@media调整更稳妥 - 避免用
margin-top在导航自身上——这不会腾出空间，反而让 fixed 元素向下偏移
移动端要注意 viewport 和缩放行为
某些 iOS Safari 版本在地址栏收起/展开时会触发视口高度重算，导致 fixed 导航短暂错位或抖动：
立即学习“前端免费学习笔记（深入）”；
- 确保
存在且未禁用缩放 - 避免在导航内使用
transform: translateZ(0)强制硬件加速——它可能加剧 iOS 的重绘异常 - 如需平滑过渡，优先用
will-change: transform配合top动画，而非依赖 scroll 事件 js 控制
导航栏 fixed 定位看着简单，真正上线后最容易出问题的是 body 内容被遮挡、移动端视口变化引发的偏移，以及 z-index 层级被第三方 ui 库意外覆盖——这些细节比写对 CSS 更花调试时间。