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

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

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

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

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

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节有介绍)

  1.  function ScrollSpy(element, options) {
  2.      this.$body          = $(document.body)
  3.      this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)
  4.      this.options        = $.extend({}, ScrollSpy.DEFAULTS, options)
  5.      this.selector       = (this.options.target || '') + ' .nav li > a'
  6.      this.offsets        = []
  7.      this.targets        = []
  8.      this.activeTarget   = null
  9.      this.scrollHeight   = 0
  10.  
  11.      this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))
  12.      this.refresh()
  13.      this.process()
  14.    }

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属性

  1.  ScrollSpy.prototype.activate = function (target) {
  2.     this.activeTarget = target
  3.  
  4.     this.clear()
  5.  
  6.     var selector = this.selector +
  7.       '[data-target="' + target + '"],' +
  8.       this.selector + '[href="' + target + '"]'
  9.  
  10.     var active = $(selector)
  11.       .parents('li')
  12.       .addClass('active')
  13.  
  14.     if (active.parent('.dropdown-menu').length) {
  15.       active = active
  16.         .closest('li.dropdown')
  17.         .addClass('active')
  18.     }
  19.  
  20.     active.trigger('activate.bs.scrollspy')
  21.   }

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;

  1. ScrollSpy.prototype.refresh = function () {
  2.     var that          = this
  3.     var offsetMethod  = 'offset'
  4.     var offsetBase    = 0
  5.  
  6.     this.offsets      = []
  7.     this.targets      = []
  8.     this.scrollHeight = this.getScrollHeight()
  9.  
  10.     if (!$.isWindow(this.$scrollElement[0])) {
  11.       offsetMethod = 'position'
  12.       offsetBase   = this.$scrollElement.scrollTop()
  13.     }

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需要设置的值相同）。

  1. function ScrollSpy(element, options) {
  2.     this.$body          = $(document.body)
  3.     this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)
  4.     this.options        = $.extend({}, ScrollSpy.DEFAULTS, options)
  5.     this.selector       = (this.options.target || '') + ' .nav li > a'
  6.     this.offsets        = []
  7.     this.targets        = []
  8.     this.activeTarget   = null
  9.     this.scrollHeight   = 0
  10.  
  11.     this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))
  12.     this.refresh()
  13.     this.process()
  14.   }

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

  1. 　　　　$('yourTag').scrollspy({ target: 'nav-parent-div-id' })-- yourTag 就是要承载滚动内容的元素的ID，nav-parent-div-id 就是.nav元素的父元素的id（也就是data-target的值）
  3. 乱七八糟写了一堆，下面总结一个简单的几个步骤：

　　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'});

　最后来个小栗子：

  1. <style type="text/css">
  2.         #body {
  3.             position: relative;
  4.             height: 500px;
  5.             overflow-y: scroll;
  6.         }
  7.     </style>
  1.  <div id="sc">
  2.         <ul class="nav nav-pills">
  3.             <li class="active">
  4.                 <a href="#A">第一段</a>
  5.             </li>
  6.             <li>
  7.                 <a href="#B">第二段</a>
  8.             </li>
  9.             <li>
  10.                 <a href="#C">第三段</a>
  11.             </li>
  12.         </ul>
  13.  
  14.     </div>
  1. <div id="body" class="container-fluid" data-spy="scroll" data-target="#sc">
  2.  
  3. 　　<a id="A">第一段</a><br />
  4.  
  5. 　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->
  6.  
  7. 　　<a id="A">第二段</a><br />
  8.  
  9. 　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->
  10.  
  11. 　　<a id="A">第三段</a><br />
  12.  
  13. 　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->
  14.  
  15. </div>
  1. $(function () {
  2.     $('#body').scrollspy({ target: '#sc' });
  3. });

 

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. 一点一点学ASP.NET系列

    转自:http://www.cnblogs.com/stwyhm/archive/2006/08/10/473075.html 做开发近两年了,自认为自己还算是个知道要上进的人,每天不停地学习,不停地 ...

  2. AppScan修复漏洞：启用不安全的HTTP方法

    最近对于系统使用Appscan扫描出中危漏洞“启用不安全的HTTP方法,找了很多修复方法都不能达到效果. 漏洞截图: 漏洞描述: 危险级别   中危险 影响页面   整个WEB页面. 简短描述   管 ...

  3. ARM学习笔记14——C语言和汇编相互套用

    这里,我们要准备两个文件,一个是汇编文件start.S,另一个是C文件led.c.汇编文件套用C文件中的开关灯函数,C文件套用汇编文件中延时函数. //start.S .global led_init ...

  4. $(function(){})里面不能声明定义函数

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

  5. 如何解决PHP生成UTF-8编码的CSV文件用Excel打开乱码的问题

    为了识别 Unicode 文件,Microsoft 建议所有的 Unicode 文件应该以 ZERO WIDTH NOBREAK SPACE字符开头.这作为一个”特征符”或”字节顺序标记(byte-o ...

  6. jQuery 参考手册 - 事件

    事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件. bind()向匹配元素附加一个或更多事件处理器 $(selector).bind(event,function) $(select ...

  7. OpenCL memory object 之 Global memory (2)

    转载自:http://www.cnblogs.com/mikewolf2002/archive/2011/12/18/2291584.html 当我们用clCreateBuffer, clCreate ...

  8. mysql 备份与还原

    http://dev.yesky.com/281/35291281.shtml 每一种逻辑错误发生的概率都极低,但是当多种可能性叠加的时候,小概率事件就 放大成很大的安全隐患,这时候备份的必要性就凸显 ...

  9. Gradle DSL method found: ‘android()’错误

    Gradle DSL method found: ‘android()’错误 和上个错误一样这个也是因为在新版本的Gradle中android()方法已经废弃,但是要注意android()只是在整个项 ...

  10. 单点登录SSO的实现原理

    单点登录SSO(Single Sign On)说得简单点就是在一个多系统共存的环境下,用户在一处登录后,就不用在其他系统中登录,也就是用户的一次登录能得到其他所有系统的信任.单点登录在大型网站里使用得 ...