---首先结合源代码介绍官网的说明

---然后总结了使用滚动监听的几个步骤

---最后给出一个简单的例子

---关键的一点：整体有点零散和乱七八糟，辛苦你的思维和眼睛了，呵呵

----------------------------------------------------------------------------------------------------------

1. Scrollspy currently requires the use of a Bootstrap nav component for proper highlighting of active links.

　　　　---- 使用滚动监听的话，导航栏必须采用 class="nav"的nav组件才可以：

　　　　下面是源代码中的一段，标红的部分可以证明这一点：

　　　　使用ScrollSpy的时候，需要采用<ul class="nav">标签，并且在<li>下必须有<a>标签。

　注：另外我们需要把<ul class="nav">标签放到另一个容器内(如div)，并给父容器添加一个id属性(这一点在第4节有介绍)

 function ScrollSpy(element, options) {
     this.$body          = $(document.body)
     this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)
     this.options        = $.extend({}, ScrollSpy.DEFAULTS, options)
     this.selector       = (this.options.target || '') + ' .nav li > a'
     this.offsets        = []
     this.targets        = []
     this.activeTarget   = null
     this.scrollHeight   = 0

     this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))
     this.refresh()
     this.process()
   }

2. Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the DOM like <div id="home"></div>.

　　　　--- 简单的说，就是<li>下的<a>标签必须有一个href="#id"属性，并且在滚动的内容里面，必须有对应的<a id="id"></a>这样的标签；当内容滚动到<a id="id">标签时，对应的<li>的<a href="#id">就会自动被选中。

　　　　--其实这一点做过Web开发的朋友都知道，在之前的HTML版本中，锚标记 通常采用<a name="tag">这样的方式，但HTML5中的锚标记已经抛弃了name属性，而是采用id属性

 ScrollSpy.prototype.activate = function (target) {
    this.activeTarget = target

    this.clear()

    var selector = this.selector +
      '[data-target="' + target + '"],' +
      this.selector + '[href="' + target + '"]'

    var active = $(selector)
      .parents('li')
      .addClass('active')

    if (active.parent('.dropdown-menu').length) {
      active = active
        .closest('li.dropdown')
        .addClass('active')
    }

    active.trigger('activate.bs.scrollspy')
  }

3. No matter the implementation method, scrollspy requires the use of position: relative; on the element you're spying on. In most cases this is the <body>. When scrollspying on elements other than the <body>, be sure to have a height set and overflow-y: scroll; applied.

　　--- 如果监听Body的滚动，那么你必须给body添加position:relative样式

　　--- 如果监听的不是Body，而是其他得元素[貌似这种方式常见]，那么你需要添加三个样式：position:relative;height:500px;overflow-y:scroll;

ScrollSpy.prototype.refresh = function () {
    var that          = this
    var offsetMethod  = 'offset'
    var offsetBase    = 0

    this.offsets      = []
    this.targets      = []
    this.scrollHeight = this.getScrollHeight()

    if (!$.isWindow(this.$scrollElement[0])) {
      offsetMethod = 'position'
      offsetBase   = this.$scrollElement.scrollTop()
    }

4. To easily add scrollspy behavior to your topbar navigation, add data-spy="scroll" to the element you want to spy on (most typically this would be the <body>). Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .navcomponent.

　　---  你需要给滚动内容的标签添加 data-spy="scroll"属性和data-target属性

　　　　data-spy 属性指明了被监听的元素，data-target属性指明滚动时需要控制的nav高亮显示

　　再看一次下面的初始化源代码，标红的位置，this.options.target的值，就等于滚动内容元素的data-target的值，看到这里，你或许已经想到，在定义.nav组件的时候，我们需要把.nav放在另一个容器内(比如div),且该容器需要有一个id属性（与这里data-target需要设置的值相同）。

function ScrollSpy(element, options) {
    this.$body          = $(document.body)
    this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)
    this.options        = $.extend({}, ScrollSpy.DEFAULTS, options)
    this.selector       = (this.options.target || '') + ' .nav li > a'
    this.offsets        = []
    this.targets        = []
    this.activeTarget   = null
    this.scrollHeight   = 0

    this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))
    this.refresh()
    this.process()
  }

5. After adding position: relative; in your CSS, call the scrollspy via JavaScript:

　　　　$('yourTag').scrollspy({ target: 'nav-parent-div-id' })-- yourTag 就是要承载滚动内容的元素的ID，nav-parent-div-id 就是.nav元素的父元素的id（也就是data-target的值）

乱七八糟写了一堆，下面总结一个简单的几个步骤：

　　1. 添加标签<div id="scrollSpyID">

　　2. 在标签内添加.nav组件，并给li->a添加href="#tag"属性

　　3. 添加<div id="content" data-spy="scroll" data-target="#scrollSpyID">;

　　4. 添加样式#content{height:500px;overflow-y:scroll;opsition:relative;}

　　5. 添加脚本$('#content').scrollspy({target:'scrollSpyID'});

　最后来个小栗子：

<style type="text/css">
        #body {
            position: relative;
            height: 500px;
            overflow-y: scroll;
        }
    </style>
 <div id="sc">
        <ul class="nav nav-pills">
            <li class="active">
                <a href="#A">第一段</a>
            </li>
            <li>
                <a href="#B">第二段</a>
            </li>
            <li>
                <a href="#C">第三段</a>
            </li>
        </ul>

    </div>
<div id="body" class="container-fluid" data-spy="scroll" data-target="#sc">

　　<a id="A">第一段</a><br />

　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->

　　<a id="A">第二段</a><br />

　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->

　　<a id="A">第三段</a><br />

　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->

</div>
$(function () {
    $('#body').scrollspy({ target: '#sc' });
});

 

bootstap 滚动监听的更多相关文章

  1. 滚动监听（bootstrap）

    1.05 腊八节   一直都想知道滚动监听是怎么做出来的,今天终于扒拉出来了,在使用的时候只要加上div定位就可以了... <head> <link rel="styles ...

  2. Bootstrap滚动监听

    滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标.其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class. <!DO ...

  3. jQuery页面滚动监听事件及高级效果插件

    jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...

  4. Bootstrap 下拉菜单和滚动监听插件

    一．下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...

  5. bootstrap的滚动监听

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  6. Android对ScrollView滚动监听，实现美团、大众点评的购买悬浮效果

    转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17761431),请尊重他人的辛勤劳动成果,谢谢! 我之前写 ...

  7. bootstrap-js(3)滚动监听

    导航条实例 ScrollSpy插件根据滚动的位置自动更新导航条中相应的导航项. 拖动下面区域的滚动条,使其低于导航条的位置,注意观察active类的变化.下拉菜单中的子项也会跟着变为高亮状态. 1.调 ...

  8. Bootstrap入门（二十六）JS插件3：滚动监听

    很多时候我们在浏览一些网页的时候,导航条会根据我们浏览网页的进度而发生不同的变化,这种就是滚动监听. 你的顶栏导航,添加data-spy="scroll"到您想要刺探(最典型的是这 ...

  9. vue监听滚动事件，实现滚动监听

    在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. 【Java基础01】Java InputStream的read方法

    JDK关于InputStream中的read方法的描述: (1) read() :  从输入流中读取数据的下一个字节,返回0到255范围内的int字节值.如果因为已经到达流末尾而没有可用的字节,则返回 ...

  2. 【HDOJ】1963 Investment

    完全背包. #include <stdio.h> #include <string.h> #define max(a, b) (a>b) ? a:b ], an[]; ] ...

  3. C#获取文件的当前路径

    C#获取文件的当前路径 1. System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName -获取模块的完整路径. 2.Syst ...

  4. spring-data-redis --简单的用spring-data-redis

    spring-data-redis序列化策略 spring-data-redis提供了多种serializer策略,这对使用jedis的开发者而言,实在是非常便捷.sdr提供了4种内置的seriali ...

  5. Linux停SVN提交时强制写日志

    Linux下SVN提交时强制写日志 SVN默认可以不写注释提交,有时候可能忘记写注释,有的人也没有写注释的习惯,导致翻看history的时候都不知道做了哪些更改,可以依照以下步骤修改SVN配置,强制提 ...

  6. web调试工具

    Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发还是测试来说,都有很大 ...

  7. FileUtils类介绍

    Java的文件操作太基础,缺乏很多实用工具,比如对目录的操作,支持就非常的差了.如果你经常用Java操作文件或文件夹,你会觉得反复编写这些代码是令人沮丧的问题,而且要大量用到递归. 下面是的一个解决方 ...

  8. Cogs 1709. [SPOJ705]不同的子串 后缀数组

    题目:http://cojs.tk/cogs/problem/problem.php?pid=1709 1709. [SPOJ705]不同的子串 ★★   输入文件:subst1.in   输出文件: ...

  9. vmware下linux 如何添加硬盘

    1.在虚拟机的设置中增加一块硬盘.   setting -> add disk -> create a new virtual disk -> SCSI   设定大小,这里给3G:更 ...

  10. Java--创建线程及常用方法

    继承java.lang.Thread类--Thread类代表线程类  它的常用方法如下: static Thread currentThread():返回当前正在运行的线程对象的引用. static ...