效果展示
代碼如下：
<!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>