bootstap 滚动监听
---首先结合源代码介绍官网的说明
---然后总结了使用滚动监听的几个步骤
---最后给出一个简单的例子
---关键的一点:整体有点零散和乱七八糟,辛苦你的思维和眼睛了,呵呵
----------------------------------------------------------------------------------------------------------
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 .nav
component.
--- 你需要给滚动内容的标签添加 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' }); });
bootstap 滚动监听的更多相关文章
- 滚动监听(bootstrap)
1.05 腊八节 一直都想知道滚动监听是怎么做出来的,今天终于扒拉出来了,在使用的时候只要加上div定位就可以了... <head> <link rel="styles ...
- Bootstrap滚动监听
滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标.其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class. <!DO ...
- jQuery页面滚动监听事件及高级效果插件
jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...
- Bootstrap 下拉菜单和滚动监听插件
一.下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...
- bootstrap的滚动监听
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- Android对ScrollView滚动监听,实现美团、大众点评的购买悬浮效果
转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17761431),请尊重他人的辛勤劳动成果,谢谢! 我之前写 ...
- bootstrap-js(3)滚动监听
导航条实例 ScrollSpy插件根据滚动的位置自动更新导航条中相应的导航项. 拖动下面区域的滚动条,使其低于导航条的位置,注意观察active类的变化.下拉菜单中的子项也会跟着变为高亮状态. 1.调 ...
- Bootstrap入门(二十六)JS插件3:滚动监听
很多时候我们在浏览一些网页的时候,导航条会根据我们浏览网页的进度而发生不同的变化,这种就是滚动监听. 你的顶栏导航,添加data-spy="scroll"到您想要刺探(最典型的是这 ...
- vue监听滚动事件,实现滚动监听
在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...
随机推荐
- Apache / PHP 5.x Remote Code Execution Exploit
测试方法: 本站提供程序(方法)可能带有攻击性,仅供安全研究与教学之用,风险自负! /* Apache Magica by Kingcope */ /* gcc apache-magika.c -o ...
- PHP中zlib扩展实现GZIP压缩输出各种方法总结
一般情况下我们出现大量数据传输理希望减少服务器的带宽压力,会采取一种方式来压缩文件传输,php中用zlib也可以实现gzip压缩输出,下面我们来看GZIP压缩输出各种方法总结. GZIP(GNU-ZI ...
- Mvc.JQuery.Datatables
1.NuGet安装Mvc.JQuery.Datatables.Mvc.JQuery.Datatables.Templates和JQuery.Datatables https://github.com/ ...
- uva 3523 Knights of the Round Table
题意:给你n,m n为有多少人,m为有多少组关系,每组关系代表两人相互憎恨,问有多少个骑士不能参加任何一个会议. 白书算法指南 对于每个双联通分量,若不是二分图,就把里面的节点标记 #include ...
- Tsinsen A1504. Book(王迪) 数论,贪心
题目:http://www.tsinsen.com/A1504 A1504. Book(王迪) 时间限制:1.0s 内存限制:256.0MB Special Judge 总提交次数:359 ...
- PHP两个字符串比较(人为出错),两字符串类型和数据表面相等,但strcmp()结果不为0
PHP中,比较两个字符串是否相等用:strcmp(): PHP strcmp() 函数 PHP String 函数 定义和用法 strcmp() 函数比较两个字符串. 该函数返回: 0 - 如果两个字 ...
- Microsoft Dynamics CRM 2011 相关-摘自网络
Microsoft Dynamics CRM Server 2011硬件需求: 组件 *最低要求 *推荐配置 处理器 x64 体系结构或兼容的双核 1.5 GHz 处理器 四核 x64 体系结构 2 ...
- nyoj 119 士兵杀敌(三)【线段树区间最大值最小值差】
士兵杀敌(三) 时间限制:2000 ms | 内存限制:65535 KB 难度:5 描述 南将军统率着N个士兵,士兵分别编号为1~N,南将军经常爱拿某一段编号内杀敌数最高的人与杀敌数最低的人进 ...
- C#.net 创建XML
方法一:按照XML的结构一步一步的构建XML文档. 通过.Net FrameWork SDK中的命名空间"System.Xml"中封装的各种类来实现的 方法二:直接定影XML ...
- spring官方文档中文版
转 http://blog.csdn.net/tangtong1/article/details/51326887 spring官方文档:http://docs.spring.io/spring/do ...