网页超过一屏时自动浮动在网页最上方 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4  <meta charset="UTF-8">
 5  <title>adsorption</title>
 6  <style type="text/css">
 7   *{ margin: 0; padding: 0; }
 8   .header-wrap{ width: 100%; }
 9   .header-hd{ width: 980px; height: 150px; margin: 0 auto; background-color: #ccc; }
10   .header-bd{ width: 980px; height: 40px; margin: 0 auto; background-color: green; }
11   .fixed{ position: fixed; width: 100%; }
12   .fixed .header-hd{ display: none; }
13  </style>
14 
15  <script type="text/javascript">
16   window.onload=function(){
17    
18     var headerWrap=document.getElementById('header-wrap');
19     var scrollTop=0;
20     window.onscroll=function(){
21      scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
22      if(scrollTop>150){
23       headerWrap.className='fixed';
24      }else{
25       headerWrap.className='header-wrap';
26      }
27     }
28   
29   }
30  </script>
31 </head>
32 <body style="height:3000px;">
33 
34 
35  <div id="header-wrap" class="header-wrap">
36   <div class="header-hd"></div>
37   <div class="header-bd"></div>
38   
39   
40  </div>
41 </body>
42 </html>

 我自己的方法是：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4  <meta charset="UTF-8">
 5  <title>adsorption</title>
 6  <style type="text/css">
 7   *{ margin: 0; padding: 0; }
 8   .header-hd{ width: 980px; height: 150px; margin: 0 auto; background-color: #ccc; }
 9   .header-bd{ width: 980px; height: 40px; margin: 0 auto; background-color: green; }
10   .fixed{ position: fixed; width: 980px; height: 40px;  background-color: green; left:50%;margin-left:-490px; top:0px}
11   
12  </style>
13 
14  <script type="text/javascript">
15   
16  window.onload=function(){
17    
18     var headerbd=document.getElementById('bd');
19     var scrollTop=0;
20     window.onscroll=function(){
21      scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
22      if(scrollTop>150){
23       headerbd.className='fixed';
24      }else{
25       headerbd.className='header-bd';
26      }
27     }
28   
29   }
30 </script>
31 </head>
32 <body style="height:3000px;">
33 
34 
35 
36   <div class="header-hd"></div>
37   <div id="bd" class="header-bd"></div>
38   
39   
40 
41 
42 </body>
43 </html>

 

posted @ 2013-08-27 15:58  鲤鱼在睡觉  阅读(233)  评论(0)  编辑  收藏  举报