前面的话

　　滚动监听插件是用来根据滚动条所处的位置来自动更新导航项的。滚动导航条下面的区域并关注导航项的变化，下拉菜单中的条目也会自动高亮显示。本文将详细介绍Bootstrap滚动监控器

基本用法

　　滚动监听插件是根据滚动的位置自动更新导航条中相应的导航项的，该插件可自动检测到达哪个位置了，然后在需要高亮的菜单父元素上加了一个active样式

　　如果导航里有下拉菜单，并且滚动区域的内容到达下拉菜单子项所对应的区域，除了子菜单高亮之外，子菜单的父元素(dropdown按钮)也会高亮

　　在平时使用的过程中，滚动监听一般有两种用法，一种是固定一个元素的高度，进行滚动，然后对相应的菜单进行高亮显示；另外一种是对整个页面(body)进行滚动监听。两种方式的用法一样，都需要有如下3个步骤：

　　1、设置滚动容器，即在所要监听的元素上设置data-target="#selector" data-spy="scroll"属性

　　2、设置菜单链接容器，该容器的id(或样式)和data-target属性所对应的选择符要一致

　　3、在菜单容器内，必须有.nav样式的元素，并且在其内容有li元素，li内包含的a元素也是可以侦测高亮的菜单链接，即符合.nav li > a这种选择符的条件

　　4、无论何种实现方式，滚动监听都需要被监听的组件是 position: relative; 即相对定位方式

【固定元素高度】

  1. <div id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation" style="position:relative">
  2.      <ul class="nav navbar-nav">
  3.         <li><a href="#html" tabindex="-1">HTML</a></li>
  4.         <li><a href="#css" tabindex="-1">CSS</a></li>
  5.         <li><a href="#javascript" tabindex="-1">javascript</a></li>
  6.      </ul>
  7. </div>
  8.  
  9. <div data-spy="scroll" data-target="#myNavbar" style="margin-top:150px;height:250px;overflow:auto;position:relative">
  10.     <h4 id="html">Html</h4>
  11.     <p>Html内容</p>
  12.     <br><p>...</p><br><p>...</p><br><p>...</p>
  13.     <h4 id="css">CSS</h4>
  14.     <p>CSS内容</p>
  15.     <br><p>...</p><br><p>...</p><br><p>...</p>
  16.     <h4 id="javascript">javascript</h4>
  17.     <p>javascript内容</p>
  18.     <br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p>
  19. </div>

【body元素】

  1. <body data-spy="scroll" data-target="#myNavbar" style="height:300px;position:relative">
  2.  
  3. <div id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation">
  4.      <ul class="nav navbar-nav">
  5.         <li><a href="#html" tabindex="-1">HTML</a></li>
  6.         <li><a href="#css" tabindex="-1">CSS</a></li>
  7.         <li><a href="#javascript" tabindex="-1">javascript</a></li>
  8.      </ul>
  9. </div>
  10.  
  11. <h4 id="html" style="margin-top:150px">Html</h4>
  12. <p>Html内容</p>
  13. <br><p>...</p><br><p>...</p><br><p>...</p>
  14. <h4 id="css">CSS</h4>
  15. <p>CSS内容</p>
  16. <br><p>...</p><br><p>...</p><br><p>...</p>
  17. <h4 id="javascript">javascript</h4>
  18. <p>javascript内容</p>
  19. <br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p>
  20.  
  21. </body>

JS调用

　　在Bootstrap框架中，使用JavaScript方法触发滚动监控器相对来说较为简单，只需要指定两个容器的名称即可

  1. <div id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation">
  2.      <ul class="nav navbar-nav">
  3.         <li><a href="#html" tabindex="-1">HTML</a></li>
  4.         <li><a href="#css" tabindex="-1">CSS</a></li>
  5.         <li><a href="#javascript" tabindex="-1">javascript</a></li>
  6.      </ul>
  7. </div>
  8. <div id="scrollspy"  style="margin-top:150px;height:250px;overflow:auto;position:relative">
  9.     <h4 id="html">Html</h4>
  10.     <p>Html内容</p>
  11.     <br><p>...</p><br><p>...</p><br><p>...</p>
  12.     <h4 id="css">CSS</h4>
  13.     <p>CSS内容</p>
  14.     <br><p>...</p><br><p>...</p><br><p>...</p>
  15.     <h4 id="javascript">javascript</h4>
  16.     <p>javascript内容</p>
  17.     <br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p>
  18. </div>
  19. <script>
  20. $('#scrollspy').scrollspy({ target: '#myNavbar' })
  21. </script>

方法

　　当使用滚动监听插件的同时在 DOM 中添加或删除元素后，需要像下面这样调用此刷新（ refresh） 方法

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

　　要注意的是，这种refresh方法只对声明式用法有效。如果使用的是JS触发，并且需要刷新DOM，则需要重新应用该插件；或者从data-scrollspy属性上获取该实例，然后再调用refresh方法

【参数】

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

　　滚动监控提供了一个offset参数，此参数默认值为10。默认情况下，滚动内容距离滚动容器10px以内的话，就高亮显示所对应的菜单项

【事件】

　　滚动监控也支持事件的订阅和触发功能，目前只支持一个activate事件

  1. activate.bs.scrollspy    每当一个新条目被激活后都将由滚动监听插件触发此事件。
  1. <div id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation">
  2.      <ul class="nav navbar-nav">
  3.         <li><a href="#html" tabindex="-1">HTML</a></li>
  4.         <li><a href="#css" tabindex="-1">CSS</a></li>
  5.         <li><a href="#javascript" tabindex="-1">javascript</a></li>
  6.      </ul>
  7. </div>
  8. <div id="scrollspy" data-spy="scroll" data-target="#myNavbar"  data-offset="0" style="margin-top:150px;height:250px;overflow:auto;position;relative">
  9.     <h4 id="html">Html</h4>
  10.     <p>Html内容</p>
  11.     <br><p>...</p><br><p>...</p><br><p>...</p>
  12.     <h4 id="css">CSS</h4>
  13.     <p>CSS内容</p>
  14.     <br><p>...</p><br><p>...</p><br><p>...</p>
  15.     <h4 id="javascript">javascript</h4>
  16.     <p>javascript内容</p>
  17.     <br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p><br><p>...</p>
  18. </div>
  19. <script>
  20. $(function(){
  21.     $("#myNavbar").on('activate.bs.scrollspy',function(e){
  22.         $(e.target).siblings().css('outline','none')
  23.             .end().css('outline','1px solid black');
  24.     })
  25. })
  26. </script>

JS源码

【1】IIFE

　　使用立即调用函数，防止插件内代码外泄，从而形成一个闭环，并且只能从jQuery的fn里进行扩展

  1. +function ($) {
  2.     //使用es5严格模式
  3.     'use strict';
  4.     //
  5. }(window.jQuery);

【2】初始设置

  1.   function ScrollSpy(element, options) {
  2.     this.$body          = $(document.body)
  3.     //判断滚动容器是否是body，如果是则使用window，如果不是则使用该元素本身
  4.     this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)
  5.     //将默认值和传进来的options参数合并，后者优先级高
  6.     this.options        = $.extend({}, ScrollSpy.DEFAULTS, options)
  7.     //如果option里设置了target，即data-target有值，则优先使用
  8.     //如果没有，则查找通过.nav样式的子元素，即.nav样式内的li子元素内的a链接，作为菜单容器
  9.     this.selector       = (this.options.target || '') + ' .nav li > a'
  10.     this.offsets        = []
  11.     this.targets        = []
  12.     //高亮显示的菜单
  13.     this.activeTarget   = null
  14.     this.scrollHeight   = 0
  15.     //给滚动容器绑定滚动事件
  16.     this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))
  17.     //计算当前页面内所有滚动容器内的id集合和每个id元素距离浏览器顶部的像素距离
  18.     this.refresh()
  19.     //开始正式处理
  20.     this.process()
  21.   }
  22.   //版本是3.3.7
  23.   ScrollSpy.VERSION  = '3.3.7'
  24.   //默认值为offset：10
  25.   ScrollSpy.DEFAULTS = {
  26.     offset: 10
  27.   }

【3】插件核心代码

  1.   //获取滚动容器的滚动高度
  2.   ScrollSpy.prototype.getScrollHeight = function () {
  3.     //获取特定滚动容器的滚动高度，如果没有则获取body元素的滚动高度
  4.     return this.$scrollElement[0].scrollHeight || Math.max(this.$body[0].scrollHeight, document.documentElement.scrollHeight)
  5.   }
  6.  
  7.   ScrollSpy.prototype.refresh = function () {
  8.     var that          = this
  9.     var offsetMethod  = 'offset'
  10.     var offsetBase    = 0
  11.  
  12.     this.offsets      = []
  13.     this.targets      = []
  14.     this.scrollHeight = this.getScrollHeight()
  15.  
  16.     if (!$.isWindow(this.$scrollElement[0])) {
  17.       offsetMethod = 'position'
  18.       offsetBase   = this.$scrollElement.scrollTop()
  19.     }
  20.  
  21.     this.$body
  22.       .find(this.selector)
  23.       .map(function () {
  24.         var $el   = $(this)
  25.         var href  = $el.data('target') || $el.attr('href')
  26.         var $href = /^#./.test(href) && $(href)
  27.         //返回一个二维数组，每个滚动容器内的id对象到页面顶部的距离以及高亮菜单容器里所对应的href值
  28.         return ($href
  29.           && $href.length
  30.           && $href.is(':visible')
  31.           && [[$href[offsetMethod]().top + offsetBase, href]]) || null
  32.       })
  33.       .sort(function (a, b) { return a[0] - b[0] })
  34.       .each(function () {
  35.         //收集所有的偏移值，也就是距离top的距离
  36.         that.offsets.push(this[0])
  37.         //收集菜单容器里的所有href值，也就是滚动容器里的id值
  38.         that.targets.push(this[1])
  39.       })
  40.   }
  41.  
  42.   ScrollSpy.prototype.process = function () {
  43.     //获取滚动容器的scrollTop，再加上设置的offset值
  44.     var scrollTop    = this.$scrollElement.scrollTop() + this.options.offset
  45.     //获取滚动高度
  46.     var scrollHeight = this.getScrollHeight()
  47.     //最大滚动=总scrollheight + 设置的offset值 - 设置高度height
  48.     var maxScroll    = this.options.offset + scrollHeight - this.$scrollElement.height()
  49.     var offsets      = this.offsets
  50.     var targets      = this.targets
  51.     var activeTarget = this.activeTarget
  52.     var i
  53.     if (this.scrollHeight != scrollHeight) {
  54.       this.refresh()
  55.     }
  56.     //如果超过了最大滚动，说明已经滚动到底了
  57.     if (scrollTop >= maxScroll) {
  58.       //如果最后一个元素还没有高亮，则设置最后一个元素高亮
  59.       return activeTarget != (i = targets[targets.length - 1]) && this.activate(i)
  60.     }
  61.  
  62.     if (activeTarget && scrollTop < offsets[0]) {
  63.       this.activeTarget = null
  64.       return this.clear()
  65.     }
  66.     //倒序遍历所有元素的offset
  67.     for (i = offsets.length; i--;) {
  68.       //如果i元素不等于当前高亮元素
  69.       activeTarget != targets[i]
  70.         //滚动高度 大于 i元素的offsets
  71.         && scrollTop >= offsets[i]
  72.         //i+1元素不存在，或者i+1元素大于滚动高度
  73.         && (offsets[i + 1] === undefined || scrollTop < offsets[i + 1])
  74.         //则设置i为高亮元素
  75.         && this.activate(targets[i])
  76.     }
  77.   }
  78.  
  79.   //设置高亮菜单元素
  80.   ScrollSpy.prototype.activate = function (target) {
  81.     //赋值实例属性
  82.     this.activeTarget = target
  83.  
  84.     this.clear()
  85.     //查找菜单中符合[data-target+"#' + 所高亮元素的id + '"]属性的元素
  86.     //或者href值是#' +  所高亮元素的id + '的话，也可以
  87.     var selector = this.selector +
  88.       '[data-target="' + target + '"],' +
  89.       this.selector + '[href="' + target + '"]'
  90.     //查找父元素li，然后添加active高亮样式
  91.     var active = $(selector)
  92.       .parents('li')
  93.       .addClass('active')
  94.     //如果li元素的父元素有dropdown-menu样式，则表示是一个dropdown下拉菜单
  95.     if (active.parent('.dropdown-menu').length) {
  96.       active = active
  97.         .closest('li.dropdown')
  98.         //则需要给dropdown的li元素也加上active高亮样式
  99.         .addClass('active')
  100.     }
  101.     //触发自定义高亮事件
  102.     active.trigger('activate.bs.scrollspy')
  103.   }
  104.  
  105.   //删除其他高亮元素的active样式
  106.   ScrollSpy.prototype.clear = function () {
  107.     $(this.selector)
  108.       .parentsUntil(this.options.target, '.active')
  109.       .removeClass('active')
  110.   }

【4】jQuery插件定义

  1.   function Plugin(option) {
  2.     //根据选择器，遍历所有符合规则的元素
  3.     return this.each(function () {
  4.       var $this   = $(this)
  5.       //获取自定义属性bs.scrollspy的值
  6.       var data    = $this.data('bs.scrollspy')
  7.       //如果option参数是对象，则作为ScrollSpy的参数传入
  8.       var options = typeof option == 'object' && option
  9.       //如果值不存在，则将ScrollSpy实例设置为bs.scrollSpy值
  10.       if (!data) $this.data('bs.scrollspy', (data = new ScrollSpy(this, options)))
  11.       //如果option传递了string，则表示要执行某个方法
  12.       if (typeof option == 'string') data[option]()
  13.     })
  14.   }
  15.  
  16.   var old = $.fn.scrollspy
  17.   //保留其他库的$.fn.scrollspy代码(如果定义的话)，以便在noConflict之后可以继续使用该老代码
  18.   $.fn.scrollspy             = Plugin
  19.   //重设插件构造器，可以通过该属性获取插件的真实类函数
  20.   $.fn.scrollspy.Constructor = ScrollSpy

【5】防冲突处理

  1.   $.fn.scrollspy.noConflict = function () {
  2.      //恢复以前的旧代码
  3.     $.fn.scrollspy = old
  4.     //将$.fn.scrollspy.noConflict()设置为Bootstrap的Scrollspy插件
  5.     return this
  6.   }

【6】绑定触发事件

  1.   $(window).on('load.bs.scrollspy.data-api', function () {
  2.     //遍历所有符合条件的滚动容器
  3.     $('[data-spy="scroll"]').each(function () {
  4.       var $spy = $(this)
  5.       //执行scrollspy插件，并传入滚动容器上设置的自定义参数(data-开头)
  6.       Plugin.call($spy, $spy.data())
  7.     })
  8.   })

Bootstrap滚动监控器的更多相关文章

  1. Bootstrap滚动监听(Scrollspy)插件

    Bootstrap滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标

  2. Bootstrap滚动监听

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

  3. bootstrap滚动监视原理实现

    最近在公司实习,刚好写了一个静态的网页,用到了滚动监视,就自己写了个监视,话不多说直接进入正题 $(function () { var $root = $("html,body") ...

  4. bootstrap 滚动监听 标签页 和 工具提示

    标签   <div class="container">     <h4>Tabs</h4>     <ul id="myTab ...

  5. Bootstrap学习目录

    前面的话 Bootstrap与CSS的关系,类似于javascript与jQuery的关系,原理与应用的关系.只是jQuery不再火爆,而Bootstrap依然火热,它在github有着超过100万的 ...

  6. boostrap插件

    第一章:模态弹出框 一.导入JavaScript插件 Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中.因为在Bootstrap中的JavaScript插件都 ...

  7. Bootstrap_Javascript_滚动监视器

    滚动监控器是Bootstrap提供的非常实用的JavaScript插件,被广泛应用到Web开发中.其表现形式是: 1.当用户鼠标滚动时,滚动条的位置会自动更新导航条中相应的导航项. 2.用户拖动滚动条 ...

  8. bootstrap 支持的JavaScript插件

    一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js). 具体使 ...

  9. Bootstrap 教程

    Bootstrap,来自 Twitter,是基于 HTML.CSS.JAVASCRIPT 的简介灵活的流行前段框架及交互组件集. 内容列表 Bootstrap 教程 Bootstrap 教程 Boot ...

随机推荐

  1. C# 语法四 修饰符

    1.sealed 不能派生 2.internal 仅仅在本项目中被访问 3.public 整个系统 4.private 本类访问 5.protected 本类.派生类访问 using System; ...

  2. 滚动歌词制作 之 ncm格式转mp3

    导读 BesLyric 可以将 ncm格式转MP3 了! 前几天有网友到我的博客下评论说现在会员才能下载下来的音乐发现后缀是 ncm, 没法使用 Beslyric 来制作歌词,昨天升级了一下软件,将 ...

  3. 一、java虚拟机内存区域

    内存区域 java虚拟机在java程序的过程中会把它所管理的内存划分为若干个不同的数据区域.java虚拟机规范将JVM管理的内存分为:程序计数器.本地方法栈.Java虚拟机栈.方法区.Java堆.如下 ...

  4. php的foreach中使用取地址符，注意释放

    先来举个例子: <?php $array = array(1, 2, 3); foreach ($array as &$value) {} // unset($value); forea ...

  5. session和cookie知识点总结

    cookie小结:1.cookie是在服务端创建2.cooki是保存在浏览器这一端3.cookie的生命周期可以通过 cookie.setMaxAge(2000);(如果不设置生命周期,cookie的 ...

  6. ASP.NET Web API上实现 Web Socket - 转

    1. 什么是Web Socket Web Socket是Html5中引入的通信机制,它为浏览器与后台服务器之间提供了基于TCP的全双工的通信通道.用以替代以往的LongPooling等comet st ...

  7. [转]zookeeper集群 initLimit和syncLimit

    initLimit和syncLimit是针对集群的参数 1.tickTime:CS通信心跳数 Zookeeper 服务器之间或客户端与服务器之间维持心跳的时间间隔,也就是每个 tickTime 时间就 ...

  8. Python 学习 第一篇：数据类型（数字，集合，布尔类型，操作符）

    Python语言最常用的对象是变量和常量,常量的值是字面意思,其值是不可变的,变量的值是可变的,例如,123,"上海"是常量,而a=1,a=2,其中a是变量名.内置的核心数据类型有 ...

  9. CentOS7下单机部署RabbltMQ环境的操作记录

    一.RabbitMQ简单介绍在日常工作环境中,你是否遇到过两个(多个)系统间需要通过定时任务来同步某些数据?你是否在为异构系统的不同进程间相互调用.通讯的问题而苦恼.挣扎?如果是,那么恭喜你,消息服务 ...

  10. 关于dreamweaver的软件测评

    最近在用javascript编写程序,于是便用到了dreamweaver .所以,想写一个关于dreamweaver的软件测评. 学生本人使用的是dreamweaver 8.首先,谈谈本人使用感受,打 ...