侧边固定导航栏

最近需要做一个侧边固定的导航栏，需要做到

1. 默认情况下，导航栏不是固定的
2. 只有当页面滚动，会遮盖住导航栏的时候，导航栏才是固定的
3. 页面缩放的时候，固定导航栏位置会根据页面的大小调整

后来，看了一下bootstrap里面分享的一个pin.js的实现方法，获得了一些灵感。就写在这里：

<div class="nav"><div class="title">    <label>导航栏</label></div><ul class="nav-title">    <li>        <a href="javascript:;">1</a>    </li>    <li>        <a href="javascript:;">2</a>    </li>    <li>        <a href="javascript:;">3</a>    </li></ul></div>

css就不贴了。。。主要是js

(function(){var $nav = $(".nav");var top;var left;// 计算位置，并更新坐标function calPosition(){$nav.css({position: "static"});top = $nav.offset().top;left = $nav.offset().left;fixNav();}calPosition();// 右侧导航栏固定位置function fixNavigation (){if(document.body.scrollTop > top - 10) {$nav.css({position: "fixed", left: left, top: 10});} else {$nav.css({position: "static"});}}// 滚动的时候，检查是否固定位置$(window).scroll(function(){fixNavigation();});// 当窗口大小改变的时候，还原为static，重新计算位置$(window).resize(function(){calPosition();});})(jQuery);

很简单，通过static position的时候，获取导航栏在页面上的位置(top和left值)，然后一旦需要fix position的时候，用之前获取的位置进行定位。