Bootstrap每天必学之滚动监听


Posted in Javascript onMarch 16, 2016

本文为大家介绍Bootstrap滚动监听,供大家学习,具体内容如下

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

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
经常用到的JavasScript事件的翻译
Apr 09 Javascript
jQuery 核心函数以及jQuery对象
Mar 23 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
浅谈Node.js中的定时器
Jun 18 Javascript
基于JavaScript实现文字超出部分隐藏
Feb 29 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 #Javascript
Jquery技巧(必须掌握)
Mar 16 #Javascript
Javascript的表单验证长度
Mar 16 #Javascript
Uploadify上传文件方法
Mar 16 #Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 #Javascript
原生JS实现平滑回到顶部组件
Mar 16 #Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 #Javascript
You might like
php调用mysql存储过程
2007/02/14 PHP
深入浅析php json 格式控制
2015/12/24 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
加载 Javascript 最佳实践
2011/10/30 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
js实现缓动动画
2020/11/25 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中的exec、eval使用实例
2014/09/23 Python
python 循环遍历字典元素的简单方法
2016/09/11 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
Python探索之Metaclass初步了解
2017/10/28 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
python opencv调用笔记本摄像头
2019/08/28 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
学习Python列表的基础知识汇总
2020/03/10 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
Python grpc超时机制代码示例
2020/09/14 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
东方红海科技面试题软件测试方面
2012/02/08 面试题
工程师求职简历的自我评价分享
2013/10/10 职场文书
知识竞赛活动方案
2014/02/18 职场文书