多级菜单及导航条头部固定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0; padding: 0;}
/* 顶部 */
.content {width: 100%;height: 100px;background-color: #cccccc;}
/* 导航条 */
.top {width: 100%;background-color: #15171F;}
.main {width: 1000px;height: 60px;margin: 0 auto;}
.nav {float: left;height: 60px;}
.nav ul li{float: left;list-style-type: none;line-height: 60px;padding: 0 20px;text-align: center;}
.nav ul li a{color: #fff;text-decoration: none;}
.nav .hov:hover{background-color: #00cece;}
.nav .hov .hid{width: 100%;position: absolute;left: 0;display: none;background-color: #00cece;}
.nav .hov:hover .hid{display: block;}
.nav .hov .hid ul{width: 1000px;margin: 0 auto;}
.nav .hov .hid ul li a{color: #000;}
.nav .hov .hid ul li a:hover{color: #fff;text-decoration: underline;}
.fixed{position:fixed;top:0;}
</style>
</head>
<body>
<div class="content"></div>
<div class="top">
<div class="main">
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li class="hov">
<a href="#">文章转存</a>
<div class="hid">
<ul>
<li><a href="#">前端</a></li>
<li><a href="#">后端</a></li>
<li><a href="#">数据库</a></li>
<li><a href="#">运维</a></li>
</ul>
</div>
</li>
<li><a href="#">关于我们</a></li>
<li><a href="#">加入我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</div>
</div>
<div style="width: 100%;height: 500px;background-color: #ffccff"></div>
<div style="width: 100%;height: 500px;background-color: #66ff99"></div>
<div style="width: 100%;height: 500px;background-color: #67aa99"></div>
<div style="width: 100%;height: 500px;background-color: #ffaaff"></div>
<script src="./js/jquery.js"></script>
<script>
// .content的高度
var topCon = $(".content").height();
$(window).scroll(function(){
// 滚动条到头部的距离
var topScr = $(window).scrollTop();
if(topScr > topCon){
$(".top").addClass("fixed");
}else{
$(".top").removeClass("fixed");
}
});
</script>
</body>
</html>
网友评论