在一般大型的网页,会有顶部和侧面两个导航。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>
这样就可以实现一个附加导航的滚动监听功能了。