页面滚动时固定导航菜单或侧边栏

页面滚动时固定菜单或侧边栏是常用的手段，通常依靠javascript扑捉滚屏事件，再配合元素的CSS属性来实现。CSS中position:fixed也能实现一定的需求，但功能比较局限。

1. CSS 固定导航菜单

导航菜单一般置于页面顶端或左侧，现以顶部为例，屏幕滚动时希望它一直固定在顶部，只需使用fixed属性就行：

nav{
	position:fixed;
	width:100%;
	top:0;
	right:0;
}

2. javascript 固定侧边栏

如果需要固定整个侧边栏，按上面的方法即可，但大部分时候需要在页面滚动时固定侧边栏的某些元素，用来显示小广告之类的东西，本博用来显示页内目录。假设侧边栏结构如下：

<div id="sidebar">

	<div class="s1" >
	</div>
	
	<div class="s2" >
	</div>
	
	<div class="s3" id="needfixed" >
	</div>
	
</div>

其中#needfixed是需要在滚动到此处后固定的元素，#sidebar是其父元素。滚屏到其顶部时为其添加position:fixed属性：

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
var elementPosition = $('#needfixed').offset().top;
$(window).scroll(function(){
        if($(window).scrollTop() > elementPosition){
              $('#needfixed').css('position','fixed').css('top','0');
        } else {
            $('#needfixed').css('position','static');
        }    
});
</script>

3. 可能存在的问题：固定后宽度不对了

由于当下自适应页面用的比较多，很可能是#needfixed未设置绝对宽度，而是百分比，可以通过获取其原父元素#sidebar的宽度来解决：

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
var elementPosition = $('#needfixed').offset().top;
var objWidth = $('#sidebar').width();
$(window).scroll(function(){
        if($(window).scrollTop() > elementPosition){
              $('#needfixed').css('position','fixed').css('top','0').css('width',objWidth);
        } else {
            $('#needfixed').css('position','static');
        }    
});
</script>

另外，padding和border问题可以通过box-sizing: border-box;属性搞定。