Bootstrap3实用教程
4.5.1 滚动监听插件的使用方法
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Bootstrap插件

概述

过渡

模态对话框

下拉菜单

滚动监听

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 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验