<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body,html{
position: relative;
}
#nav{
100%;
background: #000;
position: relative;
top: 200px;
}
#nav.nav{
position: fixed;
top: 0;
left: 0;
}
#list{
910px;
margin: 0 auto;
position: relative;
background: #38f;
overflow: hidden;
}
#list li{
list-style: none;
float: left;
70px;
}
#list li a{
100%;
text-decoration: none;
display: block;
float: left;
color: #fff;
font-family: "微软雅黑";
font-weight: 600;
position: relative;
z-index: 2;
padding: 10px 0;
text-align: center;
}
#list li a.first{
background: #F00;
}
#shank {
position: absolute;
top: 0;
left: 70px;
height: 41px;
background: #F00;
display: block;
}
#sList {
position: absolute;
top: 650px;
right: 20px;
height: 117px;
overflow: hidden;
}
#sList li{
list-style: none;
}
#sList li a{
display: block;
padding: 10px;
background: #abcdef;
border-bottom: 1px solid #fff;
text-decoration: none;
}
</style>
</head>
<body style="height: 5000px;">
<div id="nav">
<ul id="list">
<li><a href="#" class="first">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">体育</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">国内</a></li>
<li><a href="#">军事</a></li>
<li><a href="#">互联网</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">国际</a></li>
<li><a href="#">美食节目</a></li>
<li><a href="#">更多</a></li>
</ul>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
var oNav = document.getElementById("nav");
var oUl = document.getElementById("list");
var oLi = oUl.getElementsByTagName('li');
//导航吸附
var oNT = oNav.offsetTop;
window.onscroll = function(){
var scroll;
if( document.documentElement.scrollTop ){
scroll = document.documentElement;
}else{
scroll = document.body;
};
if( scroll.scrollTop >= oNT ){
oNav.className = 'nav';
};
if( scroll.scrollTop < oNT ){
oNav.className = '';
};
};
</script>
</body>
</html>