ygs' blog

制作固定定位的导航栏

作者：

imygs

在

固定的边栏或者导航栏貌似现在很流行，特别是边栏的广告位，老是跟着你走。这几天大修了一下主题，把顶部缩到只剩导航栏的位置，固定不动，考虑到边栏内容太小，于是边栏一起修改了，比导航栏稍微复杂一点。

效果：导航栏和边栏固定，不随页面滚动。CSS关键代码：

#header{
     width:825px;     //宽度需要确定
     position:fixed;     //固定定位
     z-index:999;     //解决某些情况下固定定位的内容被其他内容遮盖，值越大，表示放的位置越“上”
}

#sidebar{
     width:162px;
     position:fixed;
     margin-right:-411px;     //配合下一条right:50%，使边栏定位在页面之内，值应为网页主题宽度的一半
     right:50%
}

其他说明：可以看到以上代码并没有声明定位常用的 top，因为测试发现，当声明了 top，元素就会相对于整个窗口定位，而不是父元素。例如，如果博客开启了顶部的工具栏，而导航栏在工具栏下面，当声明了 top，导航栏就会忽略工具栏所占的位置，和整个浏览器窗口坐标作定位。当然，关闭了工具栏可以临时解决，但是当垂直方向有连续的固定定位是，那就出问题了，就像导航栏和边栏同时固定定位。

附加效果（JS）：导航栏遮盖正文时80%透明，鼠标选中导航栏时不透明。效果预览参照本博

jQuery 代码：

$('#header').hover(function(){     //hover函数，括号内，逗号前的函数是选中时的效果，逗号后的函数是移开时的效果
     if ($(window).scrollTop()>0){     //页面有滚动，也就是说导航栏遮盖住主体内容
          $(this).css("opacity","1")     //透明度1，就是不透明
     }},function(){     //这一行的逗号就是第一行所提到的
     if ($(window).scrollTop()>0){     //无论选中还是移开，首先判断时候有滚动
          $(this).css("opacity","0.8")}     //非透明度80%
     });

这是鼠标选中移开的效果，还有滚动时自动透明的效果

$(window).scroll(function(){     //页面滚动时自动执行
     if ($(window).scrollTop() > 0 ){     //页面有滚动，也就是说导航栏遮盖住主体内容
          $('#header').css("opacity","0.8");     //透明度80%
     }else{
          $('#header').css("opacity","1");     //非透明度100%
     }});

更多文章