1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>下滚隐藏导航</title> 6 </head> 7 <style> 8 *{ 9 padding: 0; 10 margin: 0; 11 } 12 #nav{ 13 height: 30px; 14 width: 100%; 15 background: blue; 16 position: fixed; 17 top: 0px; 18 transition:.5s; 19 } 20 #nav li{ 21 float: left; 22 width: 25%; 23 text-align: center; 24 line-height: 30px; 25 } 26 #cont{ 27 height: 2000px; 28 background:linear-gradient(#FB7EA8 20%,#F68FAC 50%,#E0D2EB); 29 margin-top: 30px; 30 } 31 </style> 32 <body> 33 <div id="nav"> 34 <ul> 35 <li>导航1</li> 36 <li>导航2</li> 37 <li>导航3</li> 38 <li>导航4</li> 39 </ul> 40 </div> 41 <div id="cont"> 42 </div> 43 </body> 44 <script> 45 var nav=document.getElementById("nav"); 46 var cont=document.getElementById("cont"); 47 window.onscroll=function(){ 48 var scrollTop=0; 49 if(document.documentElement&&document.documentElement.scrollTop){ 50 scrollTop=document.documentElement.scrollTop; 51 }else if(document.body){ 52 scrollTop=document.body.scrollTop; 53 } 54 if(scrollTop>700){ 55 nav.style.top="-30px"; 56 }else{ 57 nav.style.top="0px"; 58 } 59 } 60 </script> 61 </html>