模拟百度导航栏滚动监听
代码如下:
<!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{ 100%; height: 70px; background-color: black; /*display: none;*/ } .w{ 1210px; overflow: hidden; margin: 0 auto; } .header ul li{ float: left; 242px; height: 70px; line-height: 70px; text-align: center; background-color: blue; } .header ul li a{ display: block; 242px; height: 70px; color: #fff; } /*固定导航栏*/ .header-fix{ 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; 117px; height: 57px; padding-top: 23px; } .header-fix .fm{ float: left; 700px; height: 80px; margin-left: 100px; } .fm input[type='text']{ float: left; 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; 100px; height: 52px; background-color: #38f; position: relative; top: 15px; color: #fff; line-height: 52px; font-size: 18px; } .box1{ 100%; height: 200px; background-color: red; } .box2{ 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>