监听滚动应用场景
像百度百科中的介绍目录就运用了监听滚动的功能
简述
监听滚动基于链接的瞄点实现的，设置a链接的href为对应的div的id，点击该链接即可到达对应的位置
bootstrap实现方式
bootstrap中，我们可以先创建一个导航栏，里面的每个li元素下的a链接的href都指向一个瞄点，然后定义一个div，包含所有的瞄点对应的div，外层div指定两个data-*声明式属性：data-target=导航栏的id，data-spy=scroll固定值
实现代码
<div class="container">
<div id="mybar" class="navbar navbar-default">
<div class="navbar-header">
<a href="javascript:void(0);" class="navbar-brand">滚动监听
</a>
</div>
<div class="collapse navbar-collapse">
<div class="nav navbar-nav">
<li class="active"><a href="#home">首页
</a></li>
<li class="active"><a href="#music">音乐
</a></li>
<li class="active"><a href="#picture">图片
</a></li>
<li class="active"><a href="#video">视频
</a></li>
</div>
</div>
</div>
</div>
<div class="container" data-target="#mybar" data-spy="scroll" style="height:200px;overflow:auto; position: relative;">
<h3 id="home">首页
</h3>
<p>
daisd hsiofhn oiefn eoifhoi ewhfoiewfhfio
few hfoiefhoief heiofehwfoeiofh ewoifheio
f hoewifhioewfhefioehfoei fhewiofehif
fhoeiwfhiowefhewiofhewiofhewoifhiweof
f hweiofewhiofe hfioewhifioewfhio
wehiofewifoe hfiofefioweh foweifwieofh
we hfiwefhioewfhoeiwoifhweiohfehf hioweiofh
fwheiof hwieofh oieifohwe ifohweihofewhioehio
we hfewh fioewihofhieowfhioewhioewf hio
</p>
<h3 id="music">音乐
</h3>
<p>
daisd hsiofhn oiefn eoifhoi ewhfoiewfhfio
few hfoiefhoief heiofehwfoeiofh ewoifheio
f hoewifhioewfhefioehfoei fhewiofehif
fhoeiwfhiowefhewiofhewiofhewoifhiweof
f hweiofewhiofe hfioewhifioewfhio
wehiofewifoe hfiofefioweh foweifwieofh
we hfiwefhioewfhoeiwoifhweiohfehf hioweiofh
fwheiof hwieofh oieifohwe ifohweihofewhioehio
we hfewh fioewihofhieowfhioewhioewf hio
</p>
<h3 id="picture">图片
</h3>
<p>
daisd hsiofhn oiefn eoifhoi ewhfoiewfhfio
few hfoiefhoief heiofehwfoeiofh ewoifheio
f hoewifhioewfhefioehfoei fhewiofehif
fhoeiwfhiowefhewiofhewiofhewoifhiweof
f hweiofewhiofe hfioewhifioewfhio
wehiofewifoe hfiofefioweh foweifwieofh
we hfiwefhioewfhoeiwoifhweiohfehf hioweiofh
fwheiof hwieofh oieifohwe ifohweihofewhioehio
we hfewh fioewihofhieowfhioewhioewf hio
</p>
<h3 id="video">视频
</h3>
<p>
daisd hsiofhn oiefn eoifhoi ewhfoiewfhfio
few hfoiefhoief heiofehwfoeiofh ewoifheio
f hoewifhioewfhefioehfoei fhewiofehif
fhoeiwfhiowefhewiofhewiofhewoifhiweof
f hweiofewhiofe hfioewhifioewfhio
wehiofewifoe hfiofefioweh foweifwieofh
we hfiwefhioewfhoeiwoifhweiohfehf hioweiofh
fwheiof hwieofh oieifohwe ifohweihofewhioehio
we hfewh fioewihofhieowfhioewhioewf hio
</p>
</div>
效果图
