导航吸顶
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#nav {background:red; height:40px; line-height:40px;}
h1 {height:100px; }
.fixed {position:fixed; top:0px; width:100%;}
</style>
<script type="text/javascript">
window.onload = function(){
//获取nav
var nav = document.getElementById('nav');
//获取导航条相对于body顶端的距离nav.offsetTop
var ot = nav.offsetTop;
//console.log( nav.offsetTop );
//需要页面绑定要给scroll事件
document.onscroll = function(){
var t = document.body.scrollTop || document.documentElement.scrollTop;
console.log(t);
console.log(ot);
//此处判断
if (t >= ot) {
//需要将导航条进行固定定位
//nav.style.position = "fixed";
//nav.style.top = "10px";
nav.className = "fixed";
} else {
nav.className = "";
}
}
}
</script>
</head>
<body>
<h1>网站logo</h1>
<p>11111111111111111111111111</p>
<p>22222222222222222222222222</p>
<p>33333333333333333333333333333</p>
<p>444444444444444444444444444444444</p>
<div id="nav">
导航条
</div>
<p>555555555555555555555555555555</p>
<p>666666666666666666666666666666666</p>
<p>77777777777777777777777777777777</p>
<p>8888888888888888888888888888</p>
<p>999999999999999999999999999999</p>
<p>11111111111111111111111111</p>
<p>22222222222222222222222222</p>
<p>33333333333333333333333333333</p>
<p>444444444444444444444444444444444</p>
<p>555555555555555555555555555555</p>
<p>666666666666666666666666666666666</p>
<p>77777777777777777777777777777777</p>
<p>8888888888888888888888888888</p>
<p>999999999999999999999999999999</p>
<p>11111111111111111111111111</p>
<p>22222222222222222222222222</p>
<p>33333333333333333333333333333</p>
<p>444444444444444444444444444444444</p>
<p>555555555555555555555555555555</p>
<p>666666666666666666666666666666666</p>
<p>77777777777777777777777777777777</p>
<p>8888888888888888888888888888</p>
<p>999999999999999999999999999999</p>
<p>11111111111111111111111111</p>
<p>22222222222222222222222222</p>
<p>33333333333333333333333333333</p>
<p>444444444444444444444444444444444</p>
<p>555555555555555555555555555555</p>
<p>666666666666666666666666666666666</p>
<p>77777777777777777777777777777777</p>
<p>8888888888888888888888888888</p>
<p>999999999999999999999999999999</p>
<p>11111111111111111111111111</p>
<p>22222222222222222222222222</p>
<p>33333333333333333333333333333</p>
<p>444444444444444444444444444444444</p>
<p>555555555555555555555555555555</p>
<p>666666666666666666666666666666666</p>
<p>77777777777777777777777777777777</p>
<p>8888888888888888888888888888</p>
<p>999999999999999999999999999999</p>
<p>11111111111111111111111111</p>
<p>22222222222222222222222222</p>
<p>33333333333333333333333333333</p>
<p>444444444444444444444444444444444</p>
<p>555555555555555555555555555555</p>
<p>666666666666666666666666666666666</p>
<p>77777777777777777777777777777777</p>
<p>8888888888888888888888888888</p>
<p>999999999999999999999999999999</p>
<p>11111111111111111111111111</p>
<p>22222222222222222222222222</p>
<p>33333333333333333333333333333</p>
<p>444444444444444444444444444444444</p>
<p>555555555555555555555555555555</p>
<p>666666666666666666666666666666666</p>
<p>77777777777777777777777777777777</p>
<p>8888888888888888888888888888</p>
<p>999999999999999999999999999999</p>
<p>11111111111111111111111111</p>
<p>22222222222222222222222222</p>
<p>33333333333333333333333333333</p>
<p>444444444444444444444444444444444</p>
<p>555555555555555555555555555555</p>
<p>666666666666666666666666666666666</p>
<p>77777777777777777777777777777777</p>
<p>8888888888888888888888888888</p>
<p>999999999999999999999999999999</p><p>11111111111111111111111111</p>
<p>22222222222222222222222222</p>
<p>33333333333333333333333333333</p>
<p>444444444444444444444444444444444</p>
<p>555555555555555555555555555555</p>
<p>666666666666666666666666666666666</p>
<p>77777777777777777777777777777777</p>
<p>8888888888888888888888888888</p>
<p>999999999999999999999999999999</p>
</body>
</html>
