bootstrap监听滚动

监听滚动应用场景

像百度百科中的介绍目录就运用了监听滚动的功能

简述

监听滚动基于链接的瞄点实现的，设置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>

    <!--必须添加自定义属性，否则点击时li元素的active不会变，一直都会是video-->
    <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>

效果图