Bootstrap 附加导航

附加导航（Affix）让元素在页面滚动时"钉"在窗口的某个位置：滚动未到阈值前它待在原处，超过阈值后自动固定不动，最适合做侧边菜单或吸顶导航，常与滚动监听配合使用。

用 data 属性启用吸顶

给导航加 data-spy="affix"，data-offset-top 表示距离页面顶部多少像素后开始固定：

<nav class="navbar navbar-default" data-spy="affix"
     data-offset-top="200">
  这是会吸顶的导航栏
</nav>

说明：页面从顶部向下滚动超过 200 像素时，导航栏固定在窗口顶端，滚动其余内容时它始终可见；滚回 200 像素以内则回到文档原位。

必须配合自定义 CSS

插件滚动时只负责切换三个状态类：.affix-top（未固定）、.affix（已固定）、.affix-bottom（触底），真正"固定"要靠自己写样式：

<style>
  .affix {
    top: 0;          /* 固定在窗口顶部 */
    width: 100%;     /* 占满整行 */
    z-index: 9999;
  }
</style>

说明：缺少这段 CSS 时，滚动过阈值只会更换类名，元素并不会真的停住，这是新手最容易漏掉的一步。

用 jQuery 配置偏移并监听状态

更灵活的写法是调用 .affix() 并传入 offset 对象，同时监听状态变化事件：

<script>
  $('#sidebar').affix({
    offset: { top: 250, bottom: 120 }   // 顶部 250px 固定，底部 120px 释放
  });
  $('#sidebar').on('affixed.bs.affix', function () {
    console.log('导航已固定');
  });
</script>

说明：侧边栏向下滚过 250 像素后固定；接近页面底部 120 像素时切换为 .affix-bottom 停止跟随，避免遮住页脚。事件 affix.bs.affix、affixed.bs.affix、affix-top.bs.affix 等在状态切换时触发。

典型布局：左侧导航右侧内容

Affix 常与滚动监听组合使用：左侧用 affix 固定章节列表，右侧正文用 data-spy="scroll" 高亮当前章节，形成文档站常见的双栏导航。

小结：附加导航 = data-spy="affix" + data-offset-top 阈值 + 自定义 .affix 的 fixed 定位样式，三步齐全导航才会真正吸顶；精细控制可用 offset 对象与 affixed 系列事件。