用 position: fixed 实现顶部固定菜单需同步处理文档流遮挡、响应式高度适配、移动端滚动穿透及 IE11 兼容性问题，核心是控制影响定位的祖先属性与手势行为。

菜单栏固定在顶部不随页面滚动

用 position: fixed 是最直接的解法，但关键不是“加了就完事”，而是它会脱离文档流、导致正文内容被遮盖。很多新手加完发现下面的文字“少了一截”，就是没留出顶部空隙。

• 给菜单栏容器加上 position: fixed; top: 0; left: 0; width: 100%;
• 紧接着，在 或主内容区（比如 <main></main>）上加 margin-top，值至少等于菜单栏高度（例如 margin-top: 60px;）
• 别忘了设 z-index（比如 z-index: 1000;），否则可能被其他元素盖住

菜单栏高度不确定时怎么留白

如果菜单栏用了弹性布局、响应式字号或动态内容，高度不固定，硬写 margin-top: 60px 就会出错——小屏下文字换行，菜单变高，正文又被遮了。

• 用 padding-top 替代 margin-top：给 加 padding-top，再配合 box-sizing: border-box，这样即使菜单变高，padding 不会塌陷
• 更稳妥的做法是用 JS 读取菜单栏 offsetHeight 后动态设置 body 的 padding，但多数场景用 CSS 变量 + calc 足够：body { padding-top: calc(var(--header-height, 60px)); }
• 别依赖 min-height 或 height 硬控菜单栏高度，它会破坏响应行为

移动端 touch 滚动穿透问题

在 iOS Safari 或部分安卓浏览器里，fixed 元素有时会让底层页面“透着滚”，尤其菜单里有下拉或模态操作时。这不是 bug，是浏览器为了兼容老页面做的妥协。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 给菜单栏父容器加 touch-action: none;，能阻止底层滚动触发（但注意：这也会禁用菜单内手势，如滑动切换 tab）
• 如果菜单里有可滚动子区域（比如长导航列表），得单独给那个子容器加 touch-action: auto;，否则内部也滚不动
• 避免同时对 设置 overflow: hidden——这会导致整个页面失焦、键盘弹不出，比滚动穿透更难调

IE11 下 fixed 定位错位或抖动

IE11 对 transform 和 fixed 的组合支持有问题，如果菜单栏或其祖先用了 transform: translateZ(0) 或 scale()，fixed 就会失效或跳动。

立即学习“前端免费学习笔记（深入）”；

• 检查所有祖先元素的 transform、perspective、filter，只要有一个存在，就可能让 position: fixed 退化为 position: absolute
• 修复方法是移除不必要的 transform，或把菜单栏提到 直接子级（绕过有 transform 的父容器）
• 不用 backface-visibility: hidden 强制硬件加速——在 IE11 里它反而加剧定位异常

固定定位看着简单，但真正跑通全平台，核心不在“怎么写”，而在“谁在影响它”。菜单栏一旦嵌套进复杂布局或第三方组件，那些看不见的 transform、will-change、甚至 iframe 的 sandbox 属性，都可能让它突然失效。