随笔- 7 文章- 0 评论- 0 阅读- 1194

头部导航吸顶

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<head>
<style type="text/css">
body {
padding:0;
margin:0;
}
#nav {
width:100%;
height:60px;
background:#39f;
color:#fff;
line-height:60px;
text-align:center;
padding:0;
margin:0;
list-style:none;
}
#nav li {
float:left;
width:20%;
height:60px;
}
.fix {
position:fixed;
top:0;
left:0;
}
</style>
</head>

<div class="wrap">
<h1>在线书城</h1>
有没有一本书让你仿佛遇到春风十里
<ul id="nav">
<li>加入购物车</li>
<li>加入收藏</li>
<li>立即购买</li>
</ul>
<div class="con">
好书有好事有好诗
好书有好事有好诗
好书有好事有好诗
好书有好事有好诗
好书有好事有好诗
好书有好事有好诗
好书有好事有好诗
好书有好事有好诗
好书有好事有好诗
好书有好事有好诗
好书有好事有好诗
好书有好事有好诗
好书有好事有好诗
好书有好事有好诗
好书有好事有好诗
好书有好事有好诗
好书有好事有好诗
好书有好事有好诗
好书有好事有好诗
好书有好事有好诗
好书有好事有好诗
好书有好事有好诗
好书有好事有好诗
好书有好事有好诗
好书有好事有好诗
好书有好事有好诗
好书有好事有好诗
</div>
</div>

//获取距离页面顶端的距离
var titleTop = tit.offsetTop;
//滚动事件
document.onscroll = function(){
//获取当前滚动的距离
var btop = document.body.scrollTop||document.documentElement.scrollTop;
//如果滚动距离大于导航条据顶部的距离
if(btop>titleTop){
//为导航条设置fix
tit.className = "clearfix fix";
}else{
//移除fixed
tit.className = "clearfix";
}
}
</script>
</html>