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

最新推荐文章于 2024-07-08 16:22:29 发布

dengpenglv1161

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量156

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/aypnia/p/3285139.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-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>

转载于:https://www.cnblogs.com/aypnia/p/3285139.html

dengpenglv1161

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页超过一屏时自动浮动在网页最上方

1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>adsorption</title> 6 <style type="text/css"> 7 *{ m...
复制链接

扫一扫