分类
日志

制作固定定位的导航栏

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

效果:导航栏和边栏固定,不随页面滚动。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%
     }});