<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>adsorption</title> <style type="text/css"> *{ margin: 0; padding: 0; } .header-wrap{ width: 100%; } .header-hd{ width: 980px; height: 150px; margin: 0 auto; background-color: #ccc; } .header-bd{ width: 980px; height: 40px; margin: 0 auto; background-color: green; } .fixed{ position: fixed; width: 100%; } .fixed .header-hd{ display: none; } </style> <script type="text/javascript"> window.onload=function(){ function adsorption(){ var headerWrap=document.getElementById('header-wrap'); var scrollTop=0; window.onscroll=function(){ scrollTop=document.body.scrollTop||document.documentElement.scrollTop; if(scrollTop>100){ headerWrap.className='fixed'; }else{ headerWrap.className='header-wrap'; } } } adsorption(); } </script> </head> <body style="height:3000px;"> <div id="header-wrap" class="header-wrap"> <div class="header-hd"></div> <div class="header-bd"></div> </div> </body> </html>