侧边固定导航栏

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

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的时候，用之前获取的位置进行定位。