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

浏览数：16 / 时间：2015年06月11日

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

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

直接上传源码 了：

方法一：

[html] view plaincopyprint?
  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{width: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>   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">


<html xmlns="http://www.w3.org/1999/xhtml ">
<head> 
<title>div浮层，滚动条移动，保持位置不变</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
body{background-image:url(about:blank);background-attachment:fixed;}
#float{width:344px;height:34px;border:1px solid #C0DBF8;position:absolute;top:0px;}
</style> 
</head> 
<body>
<div id="float" >ddd</div>
<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>
<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>
<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>
<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>
<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>
<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>
</body> 
<script type="text/javascript">
var IO=document.getElementById(‘float‘),Y=IO,H=0,IE6;
IE6=window.ActiveXObject&&!window.XMLHttpRequest;
while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
if(IE6)
    IO.style.cssText="position:absolute;top:(this.fix?(document.documentElement.scrollTop-(this.javascript||"+H+")):0)";
window.onscroll=function (){
    var d=document,s=Math.max(d.documentElement.scrollTop,document.body.scrollTop);
    if(s>H&&IO.fix||s<=H&&!IO.fix)return;
    if(!IE6)IO.style.position=IO.fix?"":"fixed";        
    IO.fix=!IO.fix;
};
try{document.execCommand("BackgroundImageCache",false,true)}catch(e){};
</script> 
</html>


 

方法二：

[html] view plaincopyprint?
  1. <STRONG><body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" style="overflow: hidden;">  
  2.  <!-- div</STRONG>来实现<STRONG> -->  
  3.  <div style="width: 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; width: 300px; height: 300px;margin:-150px 0 0 -150px; position: absolute; left: 50%; top: 50%;"></STRONG>  
  10.   居中的层  
  11. <STRONG> </div>  
  12. </body></STRONG>  
<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" style="overflow: hidden;">
 <!-- div来实现 -->
 <div style="width: 100%; height: 100%; overflow: scroll;">
  <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><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><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 </div>
<div style="border: 1px red solid; width: 300px; height: 300px;margin:-150px 0 0 -150px; position: absolute; left: 50%; top: 50%;">
  居中的层
 </div>
</body>


 

方法三：

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

 

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

 

[html] view plaincopyprint?
  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. width: 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>  
<style type="text/css">
<!--
html,body {height:100%; margin:0px; font-size:12px;}

.mydiv {
background-color: #f9fff6;
border: 1px solid #009900;
text-align: center;
line-height: 25px;
font-size: 13px;
font-weight: bold;
z-index:99;
width: 300px;
height: 50px;
left:50%;/*FF IE7*/
top:50%;/*FF IE7*/

margin-left:-150px!important;/*FF IE7 half of its width */
margin-top:-60px!important;/*FF IE7 half of its height*/

margin-top:0px;
position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/

_top:       expression(eval(document.compatMode &&
            document.compatMode==‘CSS1Compat‘) ?
            documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
            document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

}
--> 
</style>
<script language="javascript" type="text/javascript">
function showDiv(){

document.getElementById(‘popDiv‘).style.display=‘block‘;

}
window.onload=function(){
    showDiv();
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>始终在中间DIV (支持IE FF)</title>

</head>

<body>
<div id="popDiv" class="mydiv" style="display:none;">始终在中间<br/>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>


郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： Android iOS 移动互联 终端开发

相关文章

随机文章

您可能还喜欢

您可能还喜欢