Bootstrap每天必学之滚动监听
本文为大家介绍Bootstrap滚动监听，供大家学习，具体内容如下
1.ScrollspycurrentlyrequirestheuseofaBootstrapnavcomponentforproperhighlightingofactivelinks.
----使用滚动监听的话，导航栏必须采用class="nav"的nav组件才可以：
下面是源代码中的一段，标红的部分可以证明这一点：
使用ScrollSpy的时候，需要采用<ulclass="nav">标签，并且在<li>下必须有<a>标签。
注：另外我们需要把<ulclass="nav">标签放到另一个容器内(如div)，并给父容器添加一个id属性(这一点在第4节有介绍)
functionScrollSpy(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||'')+'.navli>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.Navbarlinksmusthaveresolvableidtargets.Forexample,a<ahref="#home">home</a>mustcorrespondtosomethingintheDOMlike<divid="home"></div>.
---简单的说，就是<li>下的<a>标签必须有一个href="#id"属性，并且在滚动的内容里面，必须有对应的<aid="id"></a>这样的标签；当内容滚动到<aid="id">标签时，对应的<li>的<ahref="#id">就会自动被选中。
--其实这一点做过Web开发的朋友都知道，在之前的HTML版本中，锚标记通常采用<aname="tag">这样的方式，但HTML5中的锚标记已经抛弃了name属性，而是采用id属性
ScrollSpy.prototype.activate=function(target){
this.activeTarget=target
this.clear()
varselector=this.selector+
'[data-target="'+target+'"],'+
this.selector+'[href="'+target+'"]'
varactive=$(selector)
.parents('li')
.addClass('active')
if(active.parent('.dropdown-menu').length){
active=active
.closest('li.dropdown')
.addClass('active')
}
active.trigger('activate.bs.scrollspy')
}
3.Nomattertheimplementationmethod,scrollspyrequirestheuseofposition:relative;ontheelementyou'respyingon.Inmostcasesthisisthe<body>.Whenscrollspyingonelementsotherthanthe<body>,besuretohaveaheightsetandoverflow-y:scroll;applied.
---如果监听Body的滚动，那么你必须给body添加position:relative样式
---如果监听的不是Body，而是其他得元素[貌似这种方式常见]，那么你需要添加三个样式：position:relative;height:500px;overflow-y:scroll;
ScrollSpy.prototype.refresh=function(){
varthat=this
varoffsetMethod='offset'
varoffsetBase=0
this.offsets=[]
this.targets=[]
this.scrollHeight=this.getScrollHeight()
if(!$.isWindow(this.$scrollElement[0])){
offsetMethod='position'
offsetBase=this.$scrollElement.scrollTop()
}
4.Toeasilyaddscrollspybehaviortoyourtopbarnavigation,adddata-spy="scroll"totheelementyouwanttospyon(mosttypicallythiswouldbethe<body>).Thenaddthedata-targetattributewiththeIDorclassoftheparentelementofanyBootstrap.navcomponent.
--- 你需要给滚动内容的标签添加data-spy="scroll"属性和data-target属性
data-spy属性指明了被监听的元素，data-target属性指明滚动时需要控制的nav高亮显示
再看一次下面的初始化源代码，标红的位置，this.options.target的值，就等于滚动内容元素的data-target的值，看到这里，你或许已经想到，在定义.nav组件的时候，我们需要把.nav放在另一个容器内(比如div),且该容器需要有一个id属性（与这里data-target需要设置的值相同）。
functionScrollSpy(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||'')+'.navli>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.Afteraddingposition:relative;inyourCSS,callthescrollspyviaJavaScript:
$('yourTag').scrollspy({target:'nav-parent-div-id'})
--yourTag就是要承载滚动内容的元素的ID，nav-parent-div-id就是.nav元素的父元素的id（也就是data-target的值）
乱七八糟写了一堆，下面总结一个简单的几个步骤：
1.添加标签<divid="scrollSpyID">
2.在标签内添加.nav组件，并给li->a添加href="#tag"属性
3.添加<divid="content"data-spy="scroll"data-target="#scrollSpyID">;
4.添加样式#content{height:500px;overflow-y:scroll;opsition:relative;}
5.添加脚本$('#content').scrollspy({target:'scrollSpyID'});
最后来个小栗子：
<styletype="text/css">
#body{
position:relative;
height:500px;
overflow-y:scroll;
}
</style>
<divid="sc"> <ulclass="navnav-pills"> <liclass="active"> <ahref="#A">第一段</a> </li> <li> <ahref="#B">第二段</a> </li> <li> <ahref="#C">第三段</a> </li> </ul> </div>
<divid="body"class="container-fluid"data-spy="scroll"data-target="#sc"> <aid="A">第一段</a><br/> <!--这里要有很多内容，至少要保证可以滚动--> <aid="A">第二段</a><br/> <!--这里要有很多内容，至少要保证可以滚动--> <aid="A">第三段</a><br/> <!--这里要有很多内容，至少要保证可以滚动--> </div>
$(function(){
$('#body').scrollspy({target:'#sc'});
});
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程
以上就是本文的全部内容，希望对大家的学习有所帮助。