bootstrap-scrollspy(滚动侦测)是一个很有趣的组件，它会将某一个存在滚动条的区域中一些元素的ID值收集起来，然后在它们靠近滚动区顶部时高亮这些ID值代表的A元素。
它也明显的缺陷，对格式限得太死。它由两部分组成。一部分是滚动区，滚动区有个data-target用于指向包含菜单的某父元素。滚动区有一些元素，我们赖以称之为“锚点”，用于提供ID值。另一部分是菜单区，要求是.nav类型的菜单，它下面有些链接，href="#"+ID。
然后你引入bootstrap-scrollspy.js就行了，如果你的菜单还有二级菜单，还要引入bootstrap-dropdown.js
在这个组件中我们还可以绑定一种叫activate的自定义事件，它绑定菜单区的菜单项中，也是那些链接的父元素上。这些菜单项在高亮时会添加一个叫active的类名。
!function ($) {
"use strict"; // jshint ;_;
/* SCROLLSPY CLASS DEFINITION
* ========================== */
function ScrollSpy(element, options) {
//将实例绑到回调的this中
var process = $.proxy(this.process, this)
//决定绑定滚动事件的元素
, $element = $(element).is('body') ? $(window) : $(element)
, href
this.options = $.extend({}, $.fn.scrollspy.defaults, options)
//绑定事件
this.$scrollElement = $element.on('scroll.scroll-spy.data-api', process)
//取得要监控的元素的CSS表达式：1 通过data-target指定 2 通过href属性得到 （监控元素必须是一个位于LI元素的链接）
this.selector = (this.options.target
|| ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
|| '') + ' .nav li > a' //第2种情况作为导航元素的某个菜单的链接存在
this.$body = $('body')
this.refresh()
//先执行一次
this.process()
}
ScrollSpy.prototype = {
constructor: ScrollSpy
,
refresh: function () {
var self = this
this.offsets = $([])
this.targets = $([])
this.$body
.find(this.selector)
.map(function () {
var $el = $(this)
, href = $el.data('target') || $el.attr('href')
, $href = /^#\w/.test(href) && $(href)
return ( $href
&& $href.length //返回一个二维数组，它到页面顶部的距离及href的值
&& [[ $href.position().top + self.$scrollElement.scrollTop(), href ]] ) || null
})
.sort(function (a, b) {
return a[0] - b[0]
})
.each(function () {
self.offsets.push(this[0])//收集偏离值
self.targets.push(this[1])//收集href值（ID值）
})
//self.targets里都是ID选择器
}
,
process: function () {
var scrollTop = this.$scrollElement.scrollTop() + this.options.offset
, scrollHeight = this.$scrollElement[0].scrollHeight || this.$body[0].scrollHeight
//最大可以滚动的高度
, maxScroll = scrollHeight - this.$scrollElement.height()
, offsets = this.offsets
, targets = this.targets
, activeTarget = this.activeTarget
, i
if (scrollTop >= maxScroll) {
return activeTarget != (i = targets.last()[0])
&& this.activate ( i )
}
for (i = offsets.length; i--;) {
activeTarget != targets[i]
&& scrollTop >= offsets[i]//遍历offset中，寻找一个最接近顶部的元素
&& (!offsets[i + 1] || scrollTop <= offsets[i + 1])
&& this.activate( targets[i] )
}
}
,
activate: function (target) {
var active
, selector
this.activeTarget = target//重写activeTarget
$(this.selector)
.parent('.active')
.removeClass('active')
//取得新的要高亮的元素
selector = this.selector
+ '[data-target="' + target + '"],'
+ this.selector + '[href="' + target + '"]'
//#navbarExample .nav li > a[data-target="#doomsday"],#navbarExample .nav li > a[href="#doomsday"]
active = $(selector)
.parent('li')
.addClass('active')
if (active.parent('.dropdown-menu').length) {
active = active.closest('li.dropdown').addClass('active')
}
active.trigger('activate')
}
}
/* SCROLLSPY PLUGIN DEFINITION
* =========================== */
var old = $.fn.scrollspy
$.fn.scrollspy = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('scrollspy')
, options = typeof option == 'object' && option
if (!data) $this.data('scrollspy', (data = new ScrollSpy(this, options)))
if (typeof option == 'string') data[option]()
})
}
$.fn.scrollspy.Constructor = ScrollSpy
$.fn.scrollspy.defaults = {
offset: 10
}
/* SCROLLSPY NO CONFLICT
* ===================== */
$.fn.scrollspy.noConflict = function () {
$.fn.scrollspy = old
return this
}
/* SCROLLSPY DATA-API
* ================== */
$(window).on('load', function () {
//取得元素上带data-spy="scroll"的元素（它是一个带滚动条的容器）
$('[data-spy="scroll"]').each(function () {
var $spy = $(this);
$spy.scrollspy($spy.data());//收集其所有data-*属性，组成配置对象与默认配置合并
})
})
}(window.jQuery);
<!DOCTYPE html> <html> <head> <title>bootstrap学习 by 司徒正美</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="http://files.cnblogs.com/rubylouvre/bootstrap.css"/> <script src="http://files.cnblogs.com/rubylouvre/jquery1.83.js" > </script> <script src="http://files.cnblogs.com/rubylouvre/bootstrap-transition.js"></script> <script src="http://files.cnblogs.com/rubylouvre/bootstrap-scrollspy.js"></script> <script src="http://files.cnblogs.com/rubylouvre/bootstrap-dropdown.js"></script> <script> $(function(){ //注意：事件要绑定在UI容器上，而不是关闭按钮中 $('.dropdown-toggle').dropdown() //绑定activate事件 $("#navbarExample .nav li").on("activate", function(){ window.console && console.log( $(this).find("a").attr("href")) }) }) </script> </head> <body> <div id="navbarExample" class="navbar navbar-static"> <div class="navbar-inner"> <div class="container" style="width: auto;"> <a class="brand" href="#">scrollspy</a> <ul class="nav"> <li class="active"><a href="#doomsday">世界末日</a></li> <li><a href="#love">最爱的人</a></li> <li><a href="#ruby">ruby</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">党国大事 <b class="caret"></b></a> <ul class="dropdown-menu"> <li class=""><a href="#one">遛狗</a></li> <li><a href="#two">失踪</a></li> <li class="divider"></li> <li><a href="#three">耳光</a></li> </ul> </li> </ul> </div> </div> </div> <div data-spy="scroll" data-target="#navbarExample" data-offset="0" class="scrollspy-example" style="height:180px;margin-left:2em;width:600px;border:1px solid black;overflow:scroll;"> <h4 id="doomsday">世界末日</h4> <p> 今天世界末日，去学校食堂打饭，刷卡的时候对那打饭的师傅说：“都世界末日啦，打饭还要钱啊？”谁知，买饭的大妈淡定的说：“都世界末日啦，要钱还有什么用，来来来，把卡上的钱都刷完吧”。。。。。。。我们都石化啦。。。。。 </p> <h4 id="love">最爱的人</h4> <pre> 男人女人在不同的年龄阶段最爱的人分别是： 0--5岁：女人：妈妈；男人：妈妈。 6--10岁：女人：不是讨厌的男孩就行；男孩：能和我一起欺负其他人的男孩。 11--15岁：女人：16岁到19岁的大男孩，只要不是本班的那一帮就行；男人：篮球、足球、乒乓球、网球。。。。 16--25岁：女人：26岁至29岁的有事业基础、有品位、有才华的男人；男人：20岁至24岁的漂亮、有身段的女人。 25--30岁：女人：坚持要比自己大的男人：男人：20岁至24岁的漂亮、有身段的女人。 30--40岁：女人：心灵契合的男人；男人：20岁至24岁的漂亮、有身段的女人。 40--50岁：女人：男人；男人：20岁至24岁的漂亮、有身段的女人。 50--60岁：女人：能和她终老的男人；男人：20岁至24岁的漂亮、有身段的女人。 60--70岁：女人：和他在一起、需要自己照顾的男人；男人：20岁至24岁的漂亮、有身段的女人。 70--80岁：女人：和他在一起，不需要自己照顾的男人；男人：20岁至24岁的漂亮、有身段的女人。 80--90岁：女人：死在自己后面的男人；男人：虽然我已经老眼昏花，不过我还是喜欢20岁至24岁的漂亮、有身段的女人。 结论：男人是专一的。 </pre> <h4 id="ruby">Ruby开发</h4> <p > 我仅仅懂一点ASP.NET进行Web开发的知识。我知道将来必然是Web技术的天下。 我的理解，Web开发主流有Java系列、ASP.NET系列，小众一点的有PHP，RoR。 我是被Ruby吸引而学习RoR的，现在看那本《Web开发敏捷之道》第四版， 用Aptana Studio作为IDE，我买了个MacBookPro，边学书上的例子，边练习。 现在的问题是，按照书上的代码敲进去就能运行，但是不理解其中的含义啊。 </p> <h4 id="one">遛狗</h4> <p> 近日，拍摄于四川绵阳街头的一张照片引起热议，一辆在路上行驶的法院警车，车窗里伸出一个宠物狗的脑袋，四处张望。此情景被怀疑是公务人员私用警车带宠物狗兜风。经调查得知，这是我国新近引进的一批特殊品种警犬，为麻痹犯罪分子，故意化妆成宠物狗的样子。 </p> <h4 id="two">失踪</h4> <p> 4月25日，19岁的韩耀在云南省昆明市晋宁县晋城镇南门村鑫云冷库附近失踪。家属在寻找时，竟然发现这一区域已先后有8名青少年失踪，其中近一年内就有6人。有一名青年雷玉生就在此地的大街上被人拖进了一面包车，被扔进黑砖窑强迫劳动，后逃离黑砖窑重获自由。 </p> <h4 id="three">耳光</h4> <p> 30多岁女人直接吐东西在刚扫过的地上，环卫大姐上去说了两句，结果挨了三巴掌三脚。见到被打的环卫大姐时，她精神不好，坐在凳子上不说话，左脸的伤痕还很显眼，工友在一旁照料她。2012年5月4日，浙江省，杭州市。 </p> <p> 尹大姐说：“小孩子都知道不能在街上乱吐。”那女人说：那不就是你们环卫应该做的事情吗？尹大姐说：难道我们环卫工人就低人一等吗？”话音刚落，“啪”“啪”“啪”三个巴掌落在尹大姐脸上。 </p> </div> </body> </html>
运行代码
最近读源码发现，bootstrap的JS组件写得很geek。比如大量的短路与短路或代替了if分支，与data API的巧妙利用，现在这个bootstrap-scrollspy，直接把jQuery对象当成一个强化版数组容器来用。大家都是用它放元素节点，bootstrap-scrollspy在refresh方法中搞了两个jQuery对象，一个单纯放数值，一个单纯放ID选择器（字符串）。
扫一扫
770
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
