position: fixed 是唯一可靠解法，需同步设置 top/left/width、内容区 padding-top 及下拉菜单定位修复，并处理 ios 渲染陷阱如 backface-visibility 和 viewport meta。
页眉不随滚动，本质是让它脱离文档流并锚定在视口顶部——position: fixed 是唯一可靠解法，sticky-top 在多数真实场景下会失效。
为什么 sticky-top 不适合页眉固定
sticky-top 依赖父容器滚动范围生效，一旦页面整体滚动（而非某个局部容器），它就退化为 relative 或直接失效。尤其当页眉外层有 .container、.row 或任何设置了 transform/will-change 的祖先元素时，浏览器会创建新层叠上下文，sticky 完全不触发。
- 常见现象：滚动几像素后页眉突然“跳回”原位，或在 iOS Safari 中完全不动
- Bootstrap 的
.sticky-top默认只加top: 0，没配z-index和背景色，容易被内容顶上来 - 它无法解决页眉盖住首屏内容的问题——这需要你手动处理
padding-top，而fixed同样要处理，不如一步到位
用 fixed 实现页眉的三步硬操作
加 position: fixed 只是起点，必须同步完成以下三件事，否则不是遮内容、就是菜单点不开、或是 iOS 抖动：
- 给
<nav class="navbar"></nav>加top: 0+left: 0+width: 100%（Bootstrap 5 推荐用top-0 start-0 w-100） - 在紧接页眉之后的第一个内容容器（如
<main></main>或<div class="container">）上设 <code>padding-top，值等于页眉真实高度；别写死56px，用开发者工具查getComputedStyle(nav).height - 给
<div class="navbar-collapse"> 加 <code>position: relative（否则下拉菜单定位错乱），并在<ul class="dropdown-menu"></ul>上加data-bs-popper="static"和top: 100% !important移动端和 iOS 必须检查的渲染陷阱
WebKit 对
position: fixed的渲染限制极多，不处理就会抖动、闪退甚至菜单消失：- 给
<nav></nav>加backface-visibility: hidden; transform: translateZ(0)（可写成style="backface-visibility: hidden; transform: translateZ(0)"） - 确认
里有<meta name="viewport" content="width=device-width, initial-scale=1">，缺了它 iOS 固定定位基准会偏移 - 检查页眉直系父级（比如
<div class="wrapper">）有没有 <code>transform、perspective、filter或overflow: hidden——这些都会让 fixed 定位参考系从视口变成该父容器 - 避免在
html或body上设overflow-x: hidden，iOS 下会导致 fixed 元素闪烁或消失
真正难的不是加一个类，而是意识到
fixed让页眉脱离文档流后，所有原本由流式布局自动处理的关系（遮挡、定位锚点、滚动基准）都得你亲手补全。 - 给
