您的位置:首页 - 教程 - 网页特效 - 正文
jQuery网页向下滚动导航菜单到达顶部固定
效果展示

代码如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="何问起菜单">
<meta name="Description" content="何问起菜单">
<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.12.4.min.js"></script>
<title>jQuery网页向下滚动顶部固定导航菜单_何问起</title>
<base target="_blank" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}

body {
font-size: 15px;
font-family: "Microsoft yahei";
}

.head {
width: 100%;
height: 180px;
background: #ff4200;
}

.top {
width: 100%;
background: black;
height: 60px;
position: absolute;
}

.fixed {
position: fixed;
top: 0;
}

.main {
width: 1210px;
margin: 0 auto;
}

.logo {
width: 103px;
height: 28px;
margin-top: 16px;
float: left;
}

.nav_bar {
width: 600px;
float: left;
height: 60px;
margin-left: 150px;
}

.nav_bar ul li {
list-style-type: none;
float: left;
line-height: 60px;
text-align: center;
width: 100px;
}

.nav_bar ul li a {
color: #ffffff;
text-decoration: none;
display: block;
}

.nav_bar > ul > li:hover {
background: #00cece;
}

.nav_bar ul li.l1:hover .hid {
display: block;
}

.hid {
width: 100%;
height: 60px;
background: #00cece;
position: absolute;
left: 0;
display: none;
z-index:99;
}

.hid ul {
width: 1210px;
margin: 0 auto;
}

.login {
float: right;
width: 120px;
height: 30px;
margin-top: 15px;
}

.login a {
width: 55px;
height: 30px;
text-align: center;
line-height: 30px;
display: block;
float: left;
color: #fff;
border: 1px solid #666;
text-decoration: none;
}

.login a.a1:hover {
background: #5580fb;
}

.login a.a2 {
background: #5580fb;
}

.q1 {
width: 100%;
height: 700px;
background: pink;
margin-top: 60px;
text-align:center;
}
.q1 a{color:blue;}
.q2 {
width: 100%;
height: 500px;
background: #422455;
}

.q3 {
width: 100%;
height: 900px;
background: orange;
}
</style>
</head>
<body>
<div class="head">

</div>
<div class="top">
<div class="main">
<div class="logo">
<img src="http://hovertree.com/themes/hvtimages/hwqlogo.png" alt="">
</div>
<div class="nav_bar">
<ul>
<li><a href="">首页</a></li>
<li class="l1">
<a href="">产品</a>
<div class="hid">
<ul>
<li><a href="http://hovertree.com/tiku/">一级</a></li>
<li><a href="http://hovertree.com/hovertreescj/">二级</a></li>
<li><a href="http://hovertree.top">三级</a></li>
<li><a href="http://hwq2.com">四级</a></li>
<li><a href="http://hovertree.com/h/bjaf/13m3n2ts.htm">五级</a></li>
<li><a href="http://hovertree.com/h/bjaf/vk9yjrpm.htm">六级</a></li>
</ul>
</div>
</li>
<li><a href="http://hovertree.com/menu/texiao/">案例</a></li>
<li><a href="http://hovertree.com/guestbook/add/">联系我们</a></li>
<li><a href="http://hovertree.com/map/">招聘</a></li>
<li><a href="http://hovertree.com/about/">关于我们</a></li>
</ul>
</div>
<div class="login">
<a href="http://hovertree.com/hvtart/bjae/jftxwtko.htm" class="a1">登陆</a>
<a href="http://hovertree.com/h/bjaf/7ioeyqhe.htm" class="a2">注册</a>
</div>
</div>
</div>
<div class="q1">
<a href="http://hovertree.com/h/bjaf/d1b53bew.htm">原文</a>
</div>
<div class="q2"></div>
<div class="q3"></div>
<script type="text/javascript">
var head=$(".head").height();
$(window).scroll(function(){
var topScr=$(window).scrollTop();
if (topScr>head) {
$(".top").addClass("fixed");
}else{
$(".top").removeClass("fixed");
}
})
</script>
</body>
</html>

评论: