Bootstrap 滚动监听

滚动监听

Bootstrap滚动监听插件Scrollspy能够根据滚动的位置，自动更新导航条中相应的导航项。

滚动监听插件需要 bootstrap-scrollspy.js 文件支持，在使用该插件之前，应该导入 jQuery 和 bootstrap-scrollspy.js 文件。

使用方法

首先，定义导航条，并为导航链接指定目标锚点，如 href="#fat" 等。同时为导航条的外层包含框定义一个 id 值，如 id="navbarExample"，以方便滚动监听控制。

1. <div id="navbarExample" class="navbar">
2.   <div class="navbar-inner">
3.     <ul class="nav">
4.       <li><a href="#fat">@fat</a></li>
5.       <li><a href="#mdo">@mdo</a></li>
6.     </ul>
7.   </div>
8. </div>

然后，定义监听对象。这里设计一个包含框，其中包含多个子内容框。在子内容框中，为每个标题设计 id 值，如 id="fat" 等，它们分别与导航链接中的目标锚点相呼应。

1. <div>
2.   <h4 id="fat">@fat</h4>
3.   <p>Ad leggings keytar, brunch id art ...</p>
4.   <h4 id="mdo">@mdo</h4>
5.   <p>Veniam marfa mustache ...</p>
6.   ...
7. </div>

现在，拖动右侧区域的滚动条，当滚动区域到达 @mdo 时，导航条中的 @mdo 菜单项就会高亮显示，这是因为滚动监听插件能够监听滚动达到的位置，并自动为导航条的相应菜单项添加了一个 .active 类，让它高亮显示。效果如图 5‑4所示：

图5-4 Bootstrap滚动监听插件Scrollspy

如果导航中包含下拉菜单，并且滚动区域内容到达下拉菜单所对应的区域，除了子菜单高亮以外，子菜单的父元素也会高亮。子菜单会虽然高亮，但不会打开，因此需要手动打开下拉菜单，才能看到效果。效果如图 5‑5所示：

图5-5 Bootstrap滚动监听插件Scrollspy监听子菜

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。