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

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

页面滚动时固定菜单或侧边栏是常用的手段,通常依靠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>

另外,paddingborder问题可以通过box-sizing: border-box;属性搞定。