bootstrap-js(3)滚动监听

导航条实例

ScrollSpy插件根据滚动的位置自动更新导航条中相应的导航项。

拖动下面区域的滚动条，使其低于导航条的位置，注意观察active类的变化。下拉菜单中的子项也会跟着变为高亮状态。

1.调用方式

通过data属性

只需将data-spy="scroll"添加到被监听的页面元素上（大部分情况是添加到body上），然后将data-target=".navbar"添加到导航部分，仅此而已，顶部导航条就拥有了监听滚动的功能。你可能希望将滚动监听应用到.nav组件上。

<body data-spy="scroll" data-target=".navbar">...</body>

通过JavaScript

通过JavaScript启动滚动监听：

$('#navbar').scrollspy()

注意！必须为导航条中的链接指定相应的目标id。例如，<a href="#home">home</a>必须和dom中类似<div ></div>的页面元素相呼应。

2.方法

.scrollspy('refresh')

当滚动监听所作用的DOM有增删页面元素的操作时，需要调用下面的refresh方法：

$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
});

3.参数

可以通过 data 属性或 JavaScript 传递参数。对于 data 属性，其名称是将参数名附着到 data- 后面组成，例如 data-offset=""。

名称	类型	默认值	描述
offset	number	10	计算滚动位置时相对于顶部的偏移量（像素数）。

4.事件

下表列出了滚动监听中要用到事件。

事件	描述	实例
activate.bs.scrollspy	每当一个新项目被滚动监听激活时，触发该事件。	$('#myScrollspy').on('activate.bs.scrollspy', function () { // 执行一些动作... })

实例：

<!DOCTYPE HTML>
<html>
<head>
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" >
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
</head>
<body>
<nav >Spring</h4>
<p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。
</p>
<p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。
</p>
</div>
</body>
</html>