顶部菜单栏（固定在顶部）

1、CSS

/************顶部工具栏样式***********************/

#ToolBar {
    opacity:0.8;
    position:fixed;
    top:0px;
    right:0px;
    width:100%;
    height:45px;
    text-align:center;
    background:url(Images/head.jpg);
    z-index:2;
    overflow:hidden;
}

2、JS部分

<script type="text/javascript">

$(document).ready(function(){
/******************ToolBar固定在顶部不动（滚动条IE6,IE8）**************************************/
//<[[
var IO=document.getElementById('ToolBar'),Y=IO,H=0,IE6;
IE6=window.ActiveXObject&&!window.XMLHttpRequest;
while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
if(IE6)
    IO.style.cssText="position:absolute;top:expression(this.fix?(document"+
        ".documentElement.scrollTop-(this.javascript||"+H+")):200)";
window.onscroll=function (){
    var d=document,s=Math.max(d.documentElement.scrollTop,document.body.scrollTop);
    if(s>H&&IO.fix||s<=H&&!IO.fix){return;}
    if(!IE6){IO.style.position=IO.fix?"":"fixed";}        
    IO.fix=!IO.fix;
};
try{document.execCommand("BackgroundImageCache",false,true)}catch(e){};
 //]]>

})

</script> 

3、HTML

<div id="ToolBar">固定在页面</div>

 

转载于:https://www.cnblogs.com/loklook123/archive/2012/10/31/2748254.html