Bootstrap3 滚动监听的使用方法

滚动监听

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

什么是滚动监听？先看一个简单的例子：假设页面上有两个区域，一个是导航区域，一个是内容区域。导航区域的每个链接，都指向内容区域的一个锚点。这样的话，点击导航上的某个链接，就可以跳转到内容区域的相应锚点。

滚动监听，就是实现内容区域和导航链接的反向关联。简单地讲，就是在滚动内容区域时，能够自动更新导航中的导航项。例如，当滚动到内容区域的某个锚点时，导航中对应的链接自动高亮显示。

使用方法

滚动监听插件的使用方法非常简单，因为它背后的所有工作，Bootstrap已经替我们做好了。我们只需定义相应的结构，并设置几个属性就可以了。

首先，定义导航条，并让导航链接指定相应的目标锚点，如 href="#fat" 等。同时，还要为导航条定义一个 id 值，如 id="navbar"，以方便滚动监听。

<nav id="navbar" class="navbar navbar-default navbar-static">
<ul class="nav navbar-nav">
<li class="active"><a href="#fat">@fat</a></li>
<li class=""><a href="#mdo">@mdo</a></li>
...
</ul>
</nav>

然后，定义内容区域，其中包含多个锚点，它们分别与导航链接中的目标锚点相呼应。锚点可以通过元素的 id 指定，这里在每个标题定义锚点，如 id="fat" 等。如：

<div>
<h4 id="fat">@fat</h4>
<p>Ad leggings keytar, brunch id art ...</p>
<h4 id="mdo">@mdo</h4>
<p>Veniam marfa mustache ...</p>
...
</div>

如果希望滚动内容区域时，能够自动更新导航中的链接，还需要为内容区域的元素定义 data-spy="scroll" 属性和 data-target 属性。data-target 属性的值是一个选择器，让它指向监听对象。这里的监听对象就是导航条，就可以把data-target 属性的值设置为导航条的 id：

<div data-spy="scroll" data-target="#navbar">
<h4 id="fat">@fat</h4>
...
</div>

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

图4-3 滚动监听

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

图4-4 滚动监听子菜单

关于作者

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