position: sticky 是实现最简吸顶导航的首选方案，需设置 top 值（如 top: 0），父容器须有可滚动上下文（如 overflow-y: auto 或足够高度），且不能存在 overflow: hidden、transform 或 flex/grid 对齐干扰；不兼容 ie，移动端需注意 safari 15.4+ 才完整支持。

用 position: sticky 实现最简吸顶导航

直接给导航容器加 position: sticky 和 top: 0 就能生效，但前提是它有可滚动的父容器（通常是 或某个带 overflow-y: auto 的祖先）。浏览器会把它“粘”在视口顶部，直到滚动出父容器范围才停止吸顶。

常见错误是把 position: sticky 加在 <header></header> 上却忘了检查它的父级是否设置了 height 或 max-height —— 如果父容器高度不够、内容没溢出，就根本不会触发滚动，sticky 就形同虚设。

• 必须设置 top 值（如 top: 0），否则不生效
• 父容器不能是 display: flex 且未设 align-items: flex-start，否则可能被 flex 对齐“顶上去”，导致初始位置偏移
• 移动端 Safari 15.4+ 才完整支持 sticky 在 直接子元素上的表现，老版本需包裹一层 <div> <h3>为什么 <code>position: fixed 不适合纯吸顶场景？

  position: fixed 会让元素完全脱离文档流，导致后续内容“上浮”填补空位，页面布局塌陷。除非你手动给下一个兄弟元素加 margin-top 补高，否则视觉和交互都会错乱。

  更麻烦的是：fixed 元素默认相对于视口定位，如果导航条本身有阴影、边框或背景渐变，滚动时容易和下方内容产生 z-index 层叠冲突；而且它不会随父容器宽度变化自动适配（比如侧边栏收起时，fixed 导航可能还卡在旧宽度位置）。

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载
  • fixed 需要额外 JS 监听 scroll 来控制显隐，而 sticky 是纯 CSS 行为，无性能开销
  • fixed 元素无法响应父容器的 transform 或 perspective，在复杂动效页中容易“飞出去”
  • 若页面有横向滚动，fixed 导航不会随内容一起滚动，出现错位

  兼容性兜底：IE 和老 Android WebView 怎么办？

  IE 完全不支持 sticky，老版 Android WebView（Chrome scroll + 动态切 class：

  const nav = document.querySelector('.nav');
  const offsetTop = nav.offsetTop;
  
  window.addEventListener('scroll', () => {
    if (window.scrollY >= offsetTop) {
      nav.classList.add('nav--fixed');
    } else {
      nav.classList.remove('nav--fixed');
    }
  });

  对应 CSS 中定义 .nav--fixed { position: fixed; top: 0; width: 100%; }，并确保 body 有 padding-top 避免内容被遮挡。

  • 别用 getBoundingClientRect().top 替代 offsetTop，后者更稳定（不受滚动中 layout 变化影响）
  • 记得加 throttle 或 requestAnimationFrame 节流，否则快速滚动时 JS 会卡顿
  • 移动端要注意 scroll 事件在 iOS Safari 中的触发时机问题，可用 touchmove + requestAnimationFrame 组合补漏

  吸顶后内容被遮挡？检查这几个地方

  最常被忽略的是：吸顶导航虽然“粘”住了，但它原本占据的文档流空间还在，后续内容并不会自动下移 —— 这其实是 sticky 的设计本意，但新手常误以为它会像 fixed 那样腾出空白。

  真正需要“留白”的地方，应该由开发者主动处理。比如导航高 60px，就在主体内容区域加 margin-top: 60px 或用 padding-top；如果导航高度动态（比如响应式折叠），就得用 JS 更新这个值。

  • 不要给导航自身加 margin-bottom 试图“推开”下面内容 —— sticky 后它已脱离流，这个 margin 不起作用
  • 如果用了 CSS 自定义属性（如 --nav-height: 60px），记得在 JS 切换 fixed 状态时同步更新该变量
  • 当导航含 box-shadow 且背景透明时，吸顶后可能和下方内容重叠，此时需加 z-index: 1000 显式提升层级
  吸顶看着简单，但真实项目里最容易栽在父容器高度、滚动上下文、动态高度适配这三处。尤其当导航嵌在 CMS 模板或第三方组件里时，offsetParent 可能不是你以为的那个元素。