菜单悬浮

html:

<div id="ship_nav" class="nav "><ul class="nav_item clearfix fzlt"><li><a target="_blank" href="index.html">首页</a></li><li><a target="_blank" href="charter_ship.html">我要租船</a></li><li><a target="_blank" href="charter_ship.html">我要寻货</a></li><li><a target="_blank" href="view_qu_started.html">快速入门</a></li><li><a class="cur" target="_blank" href="about.html">关于我们</a></li><li><a target="_blank" href="register.html">快速注册</a></li><a class="login" target="_blank" href="#">登录</a></ul></div>

style:

/*菜单*/.nav {background:#fff;width:100%;color: #696969;font-size: 14px;}.nav_item {margin: 0px auto;width: 978px;border-bottom: 2px solid #8e8e8e;height: 98px;}.nav_item li {float: left;margin-right: 82px;}.nav_item li a {border-top: 4px solid #fff;display: inline-block;line-height: 96px;font-family:"Microsoft YaHei";font-size:14px;font-weight:bold;}.nav_item li a:hover {border-color: #ff6800;}.nav_item li a.cur {border-color: #ff6800;}.nav .login {height: 36px;width: 132px;text-align: center;line-height: 36px;border: 2px solid #8e8e8e;border-radius: 5px;font-size: 20px;font-weight:bold;float:right;margin-top:30px;}.nav .login:hover {border-color: #ff6800;color: #ff6800;}

js:

//悬浮菜单

//获取菜单距离顶部的位置var navObj=document.getElementById("ship_nav");var navTop=navObj.offsetTop;window.onscroll=function(){checkNav(navObj,navTop);}

function checkNav(Obj,Top){//判断大于菜单位置时，改变菜单样式，设置position为fixed等var scrollH = document.documentElement.scrollTop || document.body.scrollTop;//滚动条滚动距离if(scrollH>Top){Obj.style.position='fixed';Obj.style.top='0px';Obj.style.zIndex='9999';Obj.style.background='rgba(255, 255, 255, 0.72)';}else{Obj.style.position='';Obj.style.top='';Obj.style.zIndex='';Obj.style.background='';}}