前段时间有个小的需求，要做一个带侧边导航的landingpage。这种页面直观点来说，就是类似百度百科一样，随着页面的滚动，在旁边的导航栏会跟踪你的页面，作为一个活动书签。如图，红框就是侧导航：
要是直接重新写的话，也是一件有工作量的事情，所以干脆直接用bootstrap框架，里面js插件有滚动监听和affix，结合起来就可以做出来类似的效果。
ps：用的是bootstrap3
滚动监听
bootstrap的scroll.js是用来滚动监听的，而使用起来最便利的方法是直接引用在html代码里加data属性。
滚动监听都需要被监听的组件是position: relative; 即相对定位方式。大多数时候是监听 元素，所以直接在body的style里面加上这个属性即可。
然后继续在body里面加data属性，一个是data-spy，一个是data-target。
data-spy的值直接设置成"scroll"即可，而data-target则要设置成导航栏的id。实例代码如下：
<body style="position: relative;" data-spy="scroll" data-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
affix固定侧导航
affix的英文意思粘贴的意思，顾名思义，它的作用就是是网页中的元素固定粘贴在某个位置，而我们的侧边栏恰好就是要这样的效果。
使用方法也很简单，在侧导航加一个data-spy="affix"属性就可以了，可选项为data-offset，可以是data-offset-top或者data-offset-bottom，比如data-offset-top="60"，效果就是当页面距离顶部60像素之后，才开始固定这个元素（侧导航），如果不用这个可选项，则侧导航是一直黏在固定位置的。
侧导航landingpage例子
效果是这样的：https://www.lookfor404.com/langding-page-example.html
全程都是用的data属性，其中，affix的属性，我没有加上data-offset，另外就是对“返回顶端”写了几行jquery，返回顶端的时候有滚动效果，代码如下：
<script type="text/javascript">
$(function(){
$("#back-to-top").click(function(){
$('body,html').animate({scrollTop:0},1000);
return false;
});
});
</script>
完整代码直接在网页右键–查看源代码就行了，这里就不贴出来了。