在一般大型的网页，会有顶部和侧面两个导航。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>这样就可以实现一个附加导航的滚动监听功能了。
4050
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
