17-案例
模拟百度导航栏滚动监听
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
input{
border: 0;
outline: none;
}
body{
/*padding-top: 80px;*/
}
.header{
width: 100%;
height: 70px;
background-color: black;
/*display: none;*/
}
.w{
width: 1210px;
overflow: hidden;
margin: 0 auto;
}
.header ul li{
float: left;
width: 242px;
height: 70px;
line-height: 70px;
text-align: center;
background-color: blue;
}
.header ul li a{
display: block;
width: 242px;
height: 70px;
color: #fff;
}
/*固定导航栏*/
.header-fix{
width: 100%;
height: 80px;
background-color: white;
box-shadow: 0 0 5px #888;
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
/*margin-bottom: 10px;*/
}
.header-fix .logo{
float: left;
width: 117px;
height: 57px;
padding-top: 23px;
}
.header-fix .fm{
float: left;
width: 700px;
height: 80px;
margin-left: 100px;
}
.fm input[type='text']{
float: left;
width: 578px;
height: 50px;
border-top: 1px solid #999;
border-left: 1px solid #999;
border-bottom: 1px solid #999;
margin-top: 15px;
padding-left: 20px;
font-size: 20px;
}
.fm input[type='submit']{
float: left;
width: 100px;
height: 52px;
background-color: #38f;
position: relative;
top: 15px;
color: #fff;
line-height: 52px;
font-size: 18px;
}
.box1{
width: 100%;
height: 200px;
background-color: red;
}
.box2{
width: 100%;
height: 300px;
background-color: green;
}
</style>
</head>
<body style="height: 2000px">
<div class="header">
<div class="w">
<ul>
<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>
</div>
<div class="header-fix">
<div class="w">
<div class="logo">
<img src="./logo_top.png" alt="">
</div>
<form class="fm">
<input type="text" name="">
<input type="submit" name="" value="百度一下">
</form>
</div>
</div>
<div class="box1"></div>
<div class="box2"></div>
<script type="text/javascript">
window.onload = function(){
var box2Height = document.getElementsByClassName('box2')[0];
var fixBox = document.getElementsByClassName('header-fix')[0];
var headerBox = document.getElementsByClassName('header')[0];
window.onscroll = function(){
console.log(box2Height.offsetTop);
if (document.documentElement.scrollTop >=box2Height.offsetTop) {
fixBox.style.display = 'block';
document.body.style.paddingTop = '80'+ 'px';
headerBox.style.display = 'none';
}else{
fixBox.style.display = 'none';
document.body.style.paddingTop = '0'+ 'px';
headerBox.style.display = 'block';
}
}
}
</script>
</body>
</html>
