Bootstrap2用户指南
5.5.1 使用方法
阅读(

Bootstrap基础

Bootstrap框架

Bootstrap基本样式

Bootstrap组件

Bootstrap插件

概述

过渡

模态对话框

下拉菜单

滚动监听

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

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

使用方法

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

<div id="navbarExample" class="navbar">
  <div class="navbar-inner">
    <ul class="nav">
      <li><a href="#fat">@fat</a></li>
      <li><a href="#mdo">@mdo</a></li>
    </ul>
  </div>
</div>

然后,定义监听对象。这里设计一个包含框,其中包含多个子内容框。在子内容框中,为每个标题设计 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>

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

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

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

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

关于作者

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

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验