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 相关文章推荐
JavaScript实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
常用js脚本
Dec 03 Javascript
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
基于Jquery实现键盘按键监听
May 11 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
javaScript语法总结
Nov 25 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
微信小程序实现轨迹回放的示例代码
Dec 13 Javascript
在react中使用vue的状态管理的方法示例
May 02 Javascript
原生JS实现拖拽效果
Dec 04 Javascript
JavaScript实现复选框全选功能
Apr 11 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 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
JS中操作JSON总结
2020/12/06 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
jQuery filter函数使用方法
2014/05/19 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
2019/09/02 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
Python编程之多态用法实例详解
2015/05/19 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
python实现多线程端口扫描
2019/08/31 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
python游戏开发的五个案例分享
2020/03/09 Python
小学教育毕业生自荐信
2013/11/18 职场文书
社区学习十八大感想
2014/01/22 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
计算机专业毕业生自荐书
2014/06/02 职场文书
机械操作工岗位职责
2014/08/08 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
单位单身证明样本
2014/10/11 职场文书
2014年部门工作总结
2014/11/12 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python