html5左侧垂直悬浮菜单 html悬浮导航栏

*{ margin:0; padding:0;}
.nav-wrapper-fixed{ position:fixed; top:0; width:100%;}
.nav-wrapper-fixed .nav{width:960px; margin:0 auto;}
.nav-wrapper-fixed .nav li{ float:left; width:100px; margin-right:5px; background:#CCC; text-align:center; height:24px; line-height:24px; list-style:none;}
.nav-wrapper{ margin-top:100px; width:100%;}
.nav-wrapper .nav{width:960px; margin:0 auto;}
.nav-wrapper .nav li{ float:left; width:100px; margin-right:5px; background:#CCC; text-align:center; height:24px; line-height:24px; list-style:none;}
window.οnlοad=function(){
var nav=document.getElementById('nav');
var navFixed=document.getElementById('navFixed');
window.οnscrοll=function(){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
document.title=scrollTop
if(scrollTop>nav.offsetTop){
navFixed.style.display='block';
}else if(scrollTop
navFixed.style.display='none';
}
}
};

效果如图：记录下来了！