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>
