fixed menu bar

fixed_menu.css

#menu {
  position:fixed;
	_position:absolute; /* for IE6 */
	_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */
	left:0px;
	top:50px;
	width: 100%;
	height: 50px;
	padding:0 auto;
	margin:0 auto 0 auto;
	background: #FFFFFF;
	filter:alpha(Opacity=90);-moz-opacity:0.7;opacity: 0.7;
	z-index: 5;
	box-shadow: 0px 2px 5px #000;
}

#menu ul {
	padding-left: 30%;
	list-style: none;
	line-height: normal;
}

#menu li {
	display: block;
	float: left;
}

#menu a {
	display: block;
	float: left;
	height: 35px;
	margin-right: 1px;
	padding: 15px 20px 0px 20px;
	text-decoration: none;
	text-align: center;
	text-transform: capitalize;
	font-size: 14px;
	color: #000000;
}

#menu a:hover {
	text-decoration: none;
	background: #000000;
	color: #FFFFFF;
	text-shadow:1px 1px 4px #ffffff;

}

fixed_menu_bar.js

/*fix the menu bar to the top of window when scrolling*/

/* traditional methods*/

// var scrollFunc=function(e){ 
//     e=e || window.event; 
//     var menu = document.getElementById('menu');
//     var scrollTop = document.documentElement.scrollTop + document.body.scrollTop;
//     if (scrollTop>=0 && scrollTop<=50) {
//       menu.style.top = 50 - scrollTop + 'px';
//     }else if (scrollTop>=0){
//       menu.style.top = 0 + 'px';
//     }else{
//       menu.style.top = '50px';
//     }
// } 
// /*注册事件*/ 
// if(document.addEventListener){ 
//     document.addEventListener('DOMMouseScroll',scrollFunc,false); 
// }//W3C 
// window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome 

/*html5*/

window.onscroll = _onScroll;
function _onScroll(){
    var menu = document.getElementById('menu');
    var scrollTop = document.documentElement.scrollTop + document.body.scrollTop;
    if (scrollTop>=0 && scrollTop<=50) {
      menu.style.top = 50 - scrollTop + 'px';
    }else if (scrollTop>=0){
      menu.style.top = 0 + 'px';
    }else{
      menu.style.top = '50px';
    }    
};