`position: sticky` 要求元素具备明确的 `top`（或 `bottom`/`left`/`right`）偏移值，且其父容器不能限制滚动流（如无 `overflow: hidden` 干预），同时页面必须存在足够高度的内容以触发滚动粘性行为。

要使导航栏（<nav> 或包裹它的 <section>）真正“吸顶”——即在页面向下滚动时固定于视口顶部，仅靠 position: sticky 是不够的，还需满足三个关键前提：

✅ 必备条件

1. 设置有效的 top 值：sticky 是相对定位与固定定位的混合体，必须指定 top: 0（或其他方向值）来定义“粘住”的临界位置；
2. 父容器不能截断滚动上下文：若导航栏的任意祖先元素设置了 overflow: hidden、overflow: clip 或 transform/will-change 等创建了新的层叠上下文或剪裁边界，会中断 sticky 的计算上下文，导致失效；
3. 页面需有可滚动内容：sticky 只在元素进入/离开其“锚定区域”（即其自然文档流位置）时生效；若页面内容过短、无滚动空间，粘性行为不会被触发。

⚠️ 注意：overflow: hidden 本身不直接禁用 sticky，但它常出现在 .container 或 body 上，意外阻断了 sticky 元素向上查找滚动容器的路径——此时浏览器无法确定“粘住”的参考容器，从而降级为普通定位。

✅ 正确实现示例

以下是最简可靠写法（已通过 Chrome/Firefox/Safari 验证）：

Knowledge Graph - Csv Graph Loader Generator

从 CSV 数据集生成图数据库加载器和三元组映射。将表格 CSV 数据转换为图数据库可直接使用的节点、边和三元组。

下载

#navigation {
  position: sticky;
  top: 0; /* 关键！必须声明 */
  z-index: 1000; /* 确保置于其他内容之上 */
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

HTML 结构建议保持语义清晰，并确保导航后紧跟足够长的内容（如 <section id="content">）：

<section id="navigation">
  <nav class="nav-bar">
    <ul>
      <li><a href="#header">首页</a></li>
      <li><a href="#about">关于</a></li>
      <li><a href="#projects">项目</a></li>
      <li><a href="#contact">联系</a></li>
    </ul>
  </nav>
</section>

<!-- 必须存在足够高度的后续内容，否则无法触发滚动粘性 -->
<section id="content">
  <p id="header">...</p>
  <p id="about">...</p>
  <!-- 更多段落，确保页面可垂直滚动 -->
</section>

? 排查技巧（当 sticky 不生效时）

• 打开浏览器开发者工具 → 检查导航元素的 Computed 面板，确认 position 是否解析为 sticky，且 top 值有效；
• 逐级检查所有父元素（直至 <body>），排除 overflow: hidden、transform: translateZ(0)、contain: paint 等可能创建新格式化上下文的样式；
• 在 <body> 上临时添加 margin-bottom: 200vh 快速验证是否因内容不足导致未触发；
• 使用 @supports (position: sticky) 进行渐进增强（兼容性：Chrome 56+、Firefox 59+、Safari 6.1+、Edge 16+）。

? 进阶提示

• 如需兼容旧版 Safari（< 15.4），可添加 -webkit-sticky 前缀（现代版本已无需）；
• 若导航需响应式收缩/展开，建议将 sticky 应用于最外层容器（如 #navigation），而非内部 <nav>，避免 flex/grid 布局干扰；
• 配合 scroll-behavior: smooth 可提升锚点跳转体验，与 sticky 完全兼容。

只要确保 top 存在、父链无滚动截断、页面可滚动，position: sticky 就能稳定工作——它不是“bug”，而是一个依赖上下文的精巧机制。