如何使用js保持div随滚动条移动跟着移动 比如一直在窗口的上端?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用js保持div随滚动条移动跟着移动 比如一直在窗口的上端?相关的知识,希望对你有一定的参考价值。

创建一个id为menu_zdd的盒子
document.getElementById("menu_zdd").style.position="absolute"; document.getElementById("menu_zdd").style.top=(parseInt(document.documentElement.clientHeight,10)/2)+parseInt(document.documentElement.scrollTop,10)-50+"px";
document.getElementById("menu_zdd").style.left=((parseInt(document.documentElement.clientWidth,10)/2)-190)+"px";

大致上就是这个思路,动态获取位置
参考技术A 这个就没必要用js了,用css的relative 或absolutely,记得有一段时间,写js,用了relative,就出现了这种状况,恶心死了

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

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

 

div在顶部不变、滚动条滚动,div还是在顶部!

直接上传源码 了:

方法一:

  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>   


 

方法二:

  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>  


 

方法三:

  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>  

 

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

    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

以上是关于如何使用js保持div随滚动条移动跟着移动 比如一直在窗口的上端?的主要内容,如果未能解决你的问题,请参考以下文章

js 网页代码 div随滚动条 移动到浏览器顶部 固定的问题

jquery效果:DIV随浏览器滚动条上下移动

css+div如何将淘宝客服悬浮固定在右下角,不随滚动条移动。

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

HTML代码中如何用POSITION属性来固定一个DIV模块的位置,让其不随滚动条移动?

html里table表头随滚动条移动,表头只有一行,有横竖滚动条,而且横滚动条拖动的时候,表头也要随之移动