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 .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' });
});
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"> ...
随机推荐
- Phpwind v9.0 存储型xss跨站漏洞
漏洞版本: Phpwind v9.0 漏洞描述: Phpwind专注于中小网站应用的整合和价值的发掘,我们认为,以社区为网站的基础,可以提供丰富的应用,满足人们获取信息.交流.娱乐.消费等生活需求.获 ...
- PHP 'ext/soap/php_xml.c'不完整修复多个任意文件泄露漏洞
漏洞版本: PHP 5.4.1 PHP 5.3.13 PHP 5.3.12 PHP 5.3.11 PHP 5.3.10 PHP 5.3.1 PHP 5.3 漏洞描述: BUGTRAQ ID: 6237 ...
- 解决ASP.NET MVC AllowAnonymous属性无效导致无法匿名访问控制器的问题
在ASP.NET MVC项目中,一般都要使用身份验证和权限控制,但总有部分网页是可以匿名访问的.使用AllowAnonymous属性就可以指定需要匿名访问的控制器,从而跳过身份验证. 但是今天却遇到一 ...
- java 全角半角转换函数
/** * 半角转全角 * @param input String. * @return 全角字符串. */ public static String ToSBC(String input) { ch ...
- PrintWriter out = response.getWriter() 输出中文乱码问题
HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncod ...
- 【转】Xcode7.1环境下上架iOS App到AppStore 流程 (Part 二)
原文网址:http://www.cnblogs.com/ChinaKingKong/p/4964549.html 前言部分 part二部分主要讲解 iOS App IDs 的创建.概要文件的配置.以及 ...
- 畅通工程2 HDOJ--1863
畅通工程 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- 如何实现批处理文件传参数给SQLPLUS
原文地址:http://www.cnblogs.com/HondaHsu/archive/2012/11/23/2784094.html 第一:批处理文件drop_table.bat 说明: 批处理中 ...
- ASP.NET中设置一个定时器来定时更新 转
asp.net 定时器 比较少用, 中国红木网这是一个相当实用的功能,有了RSS博客镜像,就不需要在多处同时发布博客日志了.比如你同时在新浪上有自己的博客,又同时有自己的个人博客站点,那么你只需要在 ...
- 稀疏矩阵coo_matrix的乘法
稀疏矩阵的乘法在做基于n-gram的分类的时候还是相当有用的,但是由于网上资料太少,所以折腾了几天才算折腾出来. 首先scipy包里常见的稀疏矩阵有三种形式, coo_matrix, csr_matr ...