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 相关文章推荐
取得父标签
Nov 14 Javascript
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
简单通用的JS滑动门代码
Dec 19 Javascript
比Jquery的document.ready更快的方法
Apr 28 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
基于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写的留言本
2006/10/09 PHP
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
JavaScript数据类型详解
2015/04/01 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
简单介绍Python中的len()函数的使用
2015/04/07 Python
python构建深度神经网络(续)
2018/03/10 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
Python eval函数介绍及用法
2020/11/09 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
工商管理专业应届生求职信
2013/11/04 职场文书
个人求职信范文分享
2013/12/13 职场文书
招商业务员岗位职责
2013/12/16 职场文书
应急管理培训方案
2014/06/12 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
三好生演讲稿
2014/09/12 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书