zoukankan      html  css  js  c++  java

  • div浮层，滚动条移动，保持位置不变的4种方法

    div浮层，滚动条移动，保持位置不变的4种方法

    div在顶部不变、滚动条滚动，div还是在顶部！

    直接上传源码 了：

    方法一：

    [html] view plain copy
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  
    2.   
    3.   
    4. <html xmlns="http://www.w3.org/1999/xhtml ">  
    5. <head>   
    6. <title>div浮层，滚动条移动，保持位置不变</title>   
    7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    8. <style type="text/css">   
    9. body{background-image:url(about:blank);background-attachment:fixed;}  
    10. #float{344px;height:34px;border:1px solid #C0DBF8;position:absolute;top:0px;}  
    11. </style>   
    12. </head>   
    13. <body>  
    14. <div id="float" >ddd</div>  
    15. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    16. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    17. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    18. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    19. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    20. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    21. </body>   
    22. <script type="text/javascript">  
    23. var IO=document.getElementById('float'),Y=IO,H=0,IE6;  
    24. IE6=window.ActiveXObject&&!window.XMLHttpRequest;  
    25. while(Y){H+=Y.offsetTop;Y=Y.offsetParent};  
    26. if(IE6)  
    27.     IO.style.cssText="position:absolute;top:(this.fix?(document.documentElement.scrollTop-(this.javascript||"+H+")):0)";  
    28. window.onscroll=function (){  
    29.     var d=document,s=Math.max(d.documentElement.scrollTop,document.body.scrollTop);  
    30.     if(s>H&&IO.fix||s<=H&&!IO.fix)return;  
    31.     if(!IE6)IO.style.position=IO.fix?"":"fixed";          
    32.     IO.fix=!IO.fix;  
    33. };  
    34. try{document.execCommand("BackgroundImageCache",false,true)}catch(e){};  
    35. </script>   
    36. </html>   


     

    方法二：

    [html] view plain copy
    1. <strong><body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" style="overflow: hidden;">  
    2.  <!-- div</strong>来实现<strong> -->  
    3.  <div style=" 100%; height: 100%; overflow: scroll;">  
    4.   <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    5.   <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    6.   <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    7.   <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
    8.  </div>  
    9. <div style="border: 1px red solid;  300px; height: 300px;margin:-150px 0 0 -150px; position: absolute; left: 50%; top: 50%;"></strong>  
    10.   居中的层  
    11. <strong> </div>  
    12. </body></strong>  


     

    方法三：

    [html] view plain copy
    1. <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" style="overflow: hidden;">  
    2.  <!-- iframe来实现  -->  
    3.  <iframe src="http://www.csdn.net/" width="100%" height="100%" frameborder="0"></iframe>  
    4. <div style="border: 1px red solid;  300px; height: 300px;margin:-150px 0 0 -150px; position: absolute; left: 50%; top: 50%;">  
    5.  居中的层  
    6.  </div>  
    7. </body>  

    方法四：[采用css来居中]

    [html] view plain copy
      1. <style type="text/css">  
      2. <!--  
      3. html,body {height:100%; margin:0px; font-size:12px;}  
      4.   
      5. .mydiv {  
      6. background-color: #f9fff6;  
      7. border: 1px solid #009900;  
      8. text-align: center;  
      9. line-height: 25px;  
      10. font-size: 13px;  
      11. font-weight: bold;  
      12. z-index:99;  
      13.  300px;  
      14. height: 50px;  
      15. left:50%;/*FF IE7*/  
      16. top:50%;/*FF IE7*/  
      17.   
      18. margin-left:-150px!important;/*FF IE7 half of its width */  
      19. margin-top:-60px!important;/*FF IE7 half of its height*/  
      20.   
      21. margin-top:0px;  
      22. position:fixed!important;/*FF IE7*/  
      23. position:absolute;/*IE6*/  
      24.   
      25. _top:       expression(eval(document.compatMode &&  
      26.             document.compatMode=='CSS1Compat') ?  
      27.             documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/  
      28.             document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/  
      29.   
      30. }  
      31. -->   
      32. </style>  
      33. <script language="javascript" type="text/javascript">  
      34. function showDiv(){  
      35.   
      36. document.getElementById('popDiv').style.display='block';  
      37.   
      38. }  
      39. window.onload=function(){  
      40.     showDiv();  
      41. }  
      42. </script>  
      43. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
      44. <html xmlns="http://www.w3.org/1999/xhtml">  
      45. <head>  
      46. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
      47. <title>始终在中间DIV (支持IE FF)</title>  
      48.   
      49. </head>  
      50.   
      51. <body>  
      52. <div id="popDiv" class="mydiv" style="display:none;">始终在中间<br/>  
      53. </div>  
      54. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>  
      55. </body>  
      56. </html> 
  • 相关阅读:
    关于命题“网络规划中一个VLAN要对应一个网段”的证明
    详谈为何两台主机网络掩码不一致可能导致ping不通
    为什么电脑的ip地址要和网关的ip同一个子网才可以上网？
    快速理解VirtualBox的四种网络连接方式（最详细）
    Ubuntu 16.04下安装OpenStack(juno)之add the compute service报错分析
    Ubuntu 16.04下安装OpenStack(juno) 之add the image service报错分析
    曲线
    Best Cow Fences
    愤怒的牛
    斐波那契数
  • 原文地址：https://www.cnblogs.com/shsgl/p/5287558.html
Copyright © 2011-2022 走看看