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=‘‘;}
}