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 相关文章推荐
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
Jun 29 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
动态更新highcharts数据的实现方法
May 28 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 Javascript
vue实现滑动解锁功能
Mar 03 Vue.js
基于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
Oracle 常见问题解答
2006/10/09 PHP
php数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
Firebug 字幕文件JSON地址获取代码
2009/10/28 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
JS实现超级好看的鼠标小尾巴特效
2020/12/01 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
python不带重复的全排列代码
2013/08/13 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
Python中函数参数匹配模型详解
2019/06/09 Python
python集合是否可变总结
2019/06/20 Python
python关闭占用端口方式
2019/12/17 Python
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
自荐信包含哪些内容
2013/10/30 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
信息技术研修心得体会
2016/01/08 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js