优先用 position: sticky 实现横向导航栏吸顶，因其保持文档流、自动触发/退出固定状态；而 fixed 会脱离文档流导致布局塌陷、响应式错乱等问题。

横向导航栏加吸顶效果，优先用 position: sticky，不是 position: fixed；硬上 fixed 会导致布局塌陷、响应式错乱、打印样式丢失，且无法自动退出吸顶状态。

为什么横向导航用 sticky 而不用 fixed？

横向导航通常嵌在 <nav></nav> 或带 display: flex 的容器里，它需要“随内容滚动到顶才固定”，而不是一上来就死钉在视口顶部。fixed 会让元素完全脱离文档流：父容器高度归零、后续内容上移、margin-top 失效、移动端横屏时偏移。而 sticky 是浏览器自动判断临界点——滚动到视口顶部时才触发固定，滚回去就自然还原，语义和行为都更准确。

常见错误现象包括：sticky 写了但没反应、iOS Safari 上失效、导航突然在中间卡住、和侧边栏滚动区打架。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

sticky 吸顶生效的三个硬性条件

缺一不可，否则就是白写：

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

• position: sticky 必须配合 top 值（如 top: 0），只写 sticky 不设 top 等同于无效
• 该元素的**最近非 static 祖先**不能有 overflow: hidden、auto 或 scroll——模态框关闭后遗留的 body { overflow: hidden } 是高频罪魁
• 不能是表格相关标签（<table>、<code><tr>、<code><td>），这些标签对 <code>sticky 支持极差，哪怕套了 div 包裹也不行

  快速验证：DevTools 里选中导航元素 → Computed 面板看 position 是否显示为 sticky；若显示为 sticky 却不生效，立刻往上查祖先节点的 overflow 和定位上下文。

  横向导航结构下容易被忽略的布局陷阱

  横向导航常放在 flex 或 grid 容器中，但这类父容器默认 align-items: stretch，会压缩子元素的“可视区域”，导致 sticky 触发失败。必须显式设置：

  • 父容器加 align-items: flex-start（flex 布局）或 align-items: start（grid 布局）
  • 避免导航兄弟元素带 margin-top 或 transform，它们会破坏滚动上下文的起始位置计算
  • 如果导航外层是抽屉菜单、Tab 切换容器等嵌套滚动区，sticky 只对最近滚动容器生效，此时需降级为 JS 方案

  示例最小可运行结构：

  <nav class="nav-bar">
    <ul class="nav-list">
      <li><a href="https://www.php.cn/link/53a9f8cd4872ab6ef7e09a25b1bdb1e8">首页</a></li>
      <li><a href="https://www.php.cn/link/58f5494e7f958bdb46d4f26821bf1106">关于</a></li>
    </ul>
  </nav>

  .nav-bar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
  }
  .nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav-list li { margin-right: 24px; }

  兼容老设备或嵌套滚动时怎么降级？

  iOS Safari 旧版（≤15.4）、Android WebView 旧内核、IE 全系都不支持 sticky；另外，像 overflow-y: auto 的侧边栏内部滚动，sticky 也只在那个局部容器内生效，无法跨容器吸顶。

  这时必须用 JS 监听 scroll，核心逻辑是判断 getBoundingClientRect().top ≤ 0：

  • 不要用 window.onscroll 直接绑，务必节流（requestAnimationFrame 或 throttle）
  • 状态切换时改 className 比直接操作 style.position 更可控，方便配 CSS 过渡动画
  • 记得监听 resize，窗口缩放可能改变临界位置

  关键代码片段：

  const nav = document.querySelector('.nav-bar');
  let isSticky = false;
  
  function handleScroll() {
    const rect = nav.getBoundingClientRect();
    if (rect.top <= 0 && !isSticky) {
      nav.classList.add('is-sticky');
      isSticky = true;
    } else if (rect.top > 0 && isSticky) {
      nav.classList.remove('is-sticky');
      isSticky = false;
    }
  }
  
  window.addEventListener('scroll', () => requestAnimationFrame(handleScroll));
  window.addEventListener('resize', () => requestAnimationFrame(handleScroll));

  CSS 配合：

  .nav-bar.is-sticky {
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
  }

  注意：JS 方案必须手动处理 body 的 padding-top 占位，否则内容会瞬间上跳；而 sticky 天然保留原有占位，这是它最省心的地方。