bootstrap 的滚动监听

应用场景：

在一些单页面的情况下，滚动监听应用比较多。下面是一个效果图：

2、用data--toggle 属性来调用

向您想要监听的元素（通常是 body）添加 data-spy="scroll"。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。为了它能正常工作，您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。

是不是好拗口，嘿嘿，官方的东东就是想绕晕你，不如来个实例来看看：

3、使用JavaScript来调用：

选取要监听的元素，然后调用 .scrollspy() 函数：

$('body').scrollspy({ target: '.navbar-example' })

4、一般情况下，使用data-toggle属性来调用，比较简单和直接。

下面是一个实例：

• 先引入bootstrap的css文件和js文件：

• 
  
  
  
  
  注意：data-spy="scroll"的属性和data-target属性的应用。

• 一定要注意class的对应关系。

这就是滚动监听，现在很流行，不过用bootstrap很简单的就实现了。