bootstrap中jquery插件——affix附加导航、以及滚动监听功能的实现

在一般大型的网页，会有顶部和侧面两个导航。bootstrap提供的附加导航（侧面导航）可以实现监听页面滚动功能，下面看一下是什么样的：

如上图所示，右侧导航原本是相对定位的，当它随页面滚动到顶部的时候，会变成固定定位回到原来的位置（即data-offset-top扩展属性指定的位置）。且它是导航有滚动监听功能，当页面滚动到指定位置它会改变样式，也可以点击跳转到指定位置。

实现代码如下：

<!--注意扩展属性data-spy的属性值要与附加导航的id属性值相对应，如果只想要附加导航而不需要滚动监听的功能，可去掉body标签中的两个扩展属性-->
<body data-spy="scroll" data-target="#scroll">
    <div class="container">
        <h1>菜谱大全</h1>
        <h2>作者：XXX</h2>

        <div class="row">
            <div class="col-xs-10">
                <h3 id="first">第一道 宫保鸡丁</h3>
                <p class="text-justify">...</p>
                <h3 id="second">第二道 红烧鸡翅</h3>
                <p class="text-justify">...</p>
                <h3 id="third">第三道 京酱肉丝</h3>
                <p class="text-justify">...</p>
                <h3 id="fourth">第四道 鱼香肉丝</h3>
                <p class="text-justify">...</p>
            </div>

            <div class="col-xs-2">
                <!--附加导航容器，一定要加data-spy和data-offset这两个扩展属性。容器里面的内容随意写。-->
                <div id="scroll" data-spy="affix" data-offset-top="220">
                    <ul class="nav nav-pills nav-stacked">
                        <li><a href="#first">第一道</a></li>
                        <li><a href="#second">第二道</a></li>
                        <li><a href="#third">第三道</a></li>
                        <li><a href="#fourth">第四道</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>

这样就可以实现一个附加导航的滚动监听功能了。