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 相关文章推荐
详细讲解JS节点知识
Jan 31 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
jQuery中dequeue()方法用法实例
Dec 29 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
js手动播放图片实现图片轮播效果
Sep 17 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 Javascript
Vue extend的基本用法(实例详解)
Dec 09 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 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
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
webpack的CSS加载器的使用
2018/09/11 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
2019/07/19 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
python list是否包含另一个list所有元素的实例
2018/05/04 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
Django实现单用户登录的方法示例
2019/03/28 Python
django页面跳转问题及注意事项
2019/07/18 Python
python常用排序算法的实现代码
2019/11/08 Python
基于python实现模拟数据结构模型
2020/06/12 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
鱼油专家:Omegavia
2016/10/10 全球购物
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
村班子对照检查材料
2014/08/18 职场文书
企业贷款委托书格式
2014/09/12 职场文书
大学生年度个人总结
2015/02/15 职场文书
先进工作者个人总结
2015/02/15 职场文书