Bootstrap 滚动监听
滚动监听（Scrollspy）让导航菜单跟随页面滚动自动高亮：滚到哪个区块，导航里对应的菜单项就亮起来。它是长文档、帮助中心、单页官网最常见的导航增强手段。
基本用法
在最外层容器（通常直接写在 body 上）声明 data-spy="scroll" 与 data-target，后者指向导航容器：
<body data-spy="scroll" data-target="#myNav" data-offset="60">
说明：data-offset 是触发高亮的滚动偏移量，可按需调节，抵消固定导航栏的高度。
完整示例
导航锚点需与内容区块一一对应，每个区块要有能被跳转的 id：
<nav id="myNav" class="navbar navbar-default">
<ul class="nav navbar-nav">
<li><a href="#section1">第一章</a></li>
<li><a href="#section2">第二章</a></li>
</ul>
</nav>
<div id="section1">
<h2>第一章：入门</h2>
<p>很长很长的内容……</p>
</div>
<div id="section2">
<h2>第二章：进阶</h2>
<p>很长很长的内容……</p>
</div>
显示效果：滚到"第一章"位置时导航中的"第一章"自动获得高亮 active 样式，继续下滚高亮随之切到"第二章"；点击菜单可直接跳到对应章节。
编程式 API
也可以不用 data 属性而用 jQuery 初始化；当内容通过 AJAX 动态加载后需调用刷新方法重新计算：
<script>
$('body').scrollspy({ target: '#myNav', offset: 60 });
$('#myNav').on('activate.bs.scrollspy', function () {
// 高亮项切换时触发，可在此联动更新进度指示等
});
// 动态添加内容后重新计算位置
$('body').scrollspy('refresh');
</script>
说明：事件 activate.bs.scrollspy 在高亮菜单项变化后触发，常与锚点内容联动。
注意事项
- 被监听的导航容器建议带
position: relative，避免高亮定位偏移； - 区块 id 必须与导航 href 中的锚点完全一致，否则不会高亮；
- 导航固定在顶部时要用
data-offset抵消导航栏高度； - 导航与内容须位于同一个可滚动区域内，否则监听失效。
小结：滚动监听 = 在滚动容器上声明 data-spy/data-target + 让区块 id 与导航锚点一一对应；它让长页面"当前位置"一目了然，是文档站与单页站的点睛之笔。