recherche

Maison >interface Web >tutoriel HTML >通过css/js来固定div的位置_html/css_WEB-ITnose

通过css/js来固定div的位置_html/css_WEB-ITnose

WBOY
WBOYoriginal
2016-06-24 12:27:421020parcourir

一：先来看看用css的，需要在css里面写表达式，但是一闪一闪的。赋值变量"ignoreMe",并且"document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop"(这是ie的一个bug)。

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3 <HEAD> 4 <TITLE> css test </TITLE> 5 <style> 6 #LoadingStatus{ 7 position:fixed !important; 8 position:absolute; 9 top:100px;10 top: expression( ( 100 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );11 margin:0 0 0 -110px;12 width:220px;height:19px;13 left:50%;14 text-align:center;15 border:1px solid red;16 }17 </style>18 </HEAD>19 <BODY>20   <div id="LoadingStatus" style="display:none;"> loading...</div>21     <div style="height:1024px">22         <input type="button" onclick="document.getElementById('LoadingStatus').style.display=''" value='显示loading' />23       </div> 24       <div>25       <input type="button" onclick="document.getElementById('LoadingStatus').style.display=''" value='显示loading' />26     </div>27 </BODY>28 </HTML>

二：用JS写的，其实完全能套用到css中，与上面的没什么。需要注意的是，在FF下，左上右上两个仍然浮动。在IE下，全部固定，但是一闪一闪的。其中要斟酌使用。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <HTML> 3 <HEAD> 4 <TITLE>JAVASCRIPT</TITLE> 5 <META HTTP-EQUIV="Content-Type" CONTENT="text/html" charset="UTF-8"> 6 </HEAD> 7 <style> 8 <!-- 9 .div {10     position: absolute;11     border: 2px solid red;12     background-color: #EFEFEF;13     line-height:90px;14     font-size:12px;15     z-index:1000;16 }17 -->18 </style>19 <BODY>20 <div id="Javascript.Div1" class="div" style="width: 240px; height:90px" align="center">正中...</div>21 <SCRIPT LANGUAGE="JavaScript">22 function sc1(){23 document.getElementById("Javascript.Div1").style.top=24    document.documentElement.scrollTop+(document.documentElement.clientHeight-document.getElementById("Javascript.Div1").offsetHeight)/2+"px"25 document.getElementById("Javascript.Div1").style.left=26    document.documentElement.scrollLeft+(document.documentElement.clientWidth-document.getElementById("Javascript.Div1").offsetWidth)/2+"px";27 }28 </SCRIPT>29 <div id="Javascript.Div2" class="div" style="width: 240px; height:90px;" align="center">左上...</div>30 <SCRIPT LANGUAGE="JavaScript">31 function sc2(){32 document.getElementById("Javascript.Div2").style.top=document.documentElement.scrollTop;33 document.getElementById("Javascript.Div2").style.left=document.documentElement.scrollLeft;34 }35 </SCRIPT>36 <div id="Javascript.Div3" class="div" style="width: 240px; height:90px;" align="center">左下...</div>37 <SCRIPT LANGUAGE="JavaScript">38 function sc3(){39 document.getElementById("Javascript.Div3").style.top=40     document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div3").offsetHeight+"px";41 document.getElementById("Javascript.Div3").style.left=document.documentElement.scrollLeft;42 }43 </SCRIPT>44 <div id="Javascript.Div4" class="div" style="width: 240px; height:90px;" align="center">右上...</div>45 <SCRIPT LANGUAGE="JavaScript">46 function sc4(){47 document.getElementById("Javascript.Div4").style.top=document.documentElement.scrollTop;48 document.getElementById("Javascript.Div4").style.left=49     document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div4").offsetWidth+"px";50 }51 </SCRIPT>52 <div id="Javascript.Div5" class="div" style="width: 240px; height:90px;" align="center">右下...</div>53 <SCRIPT LANGUAGE="JavaScript">54 function sc5(){55 56 document.getElementById("Javascript.Div5").style.top=57     document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div5").offsetHeight+"px";58 document.getElementById("Javascript.Div5").style.left=59     document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div5").offsetWidth+"px";60 }61 </SCRIPT>62 <SCRIPT LANGUAGE="JavaScript">63 <!--64 function scall(){65 sc1();sc2();sc3();sc4();sc5();66 }67 window.onscroll=scall;68 window.onresize=scall;69 window.onload=scall;70 //-->71 </SCRIPT>72 <div style="position: absolute; top: 0; left: 0; width: 10000px; height: 4000px;"></div>73 </BODY>74 </HTML>

三：这个仍然是用js写的，不过在IE浏览器的滚动过程中，不会一闪一闪的。兼容效果很好。

 1 <!DOCTYPE HTML> 2   <html> 3   <head> 4     <meta http-equiv="content-type" charset="utf-8" /> 5     <title>Js跟随滚动条移动的DIV</title> 6   </head> 7   <style type="text/css"> 8   *{margin:0;padding: 0;background-color:#000; } 9   div#con{width: 800px;margin: 0 auto;}10   div.pop{width:800px;font-size: 18px;background:yellow;padding:20px 0;margin:20px auto;border:1px solid yellow;text-align: center;color: #000;}11   p{width:800px;padding:20px 0;background:#fff;border:1px solid #000;margin:20px auto;text-align: center;}12   div.active{position: fixed;top: 100px;z-index: 100;margin: 0;_position: absolute;}13   </style>14   <body>15   <div id="con" style="height:2000px;">16   <p>我是元素p</p>17   <div id="myDiv" class="pop active">18     我是随屏幕滚动的DIV，我距离顶部高度适中为100px，修改css就可以修改该值19   </div>20   21   <p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p>我是元素p</p><p style="color:red;position:fixed;top:400px;">我是元素top:400px;看是否支持固定定位</p>22   </div>23     <script type="text/javascript">24     (function(){25         //if(navigator.userAgent.toLocaleLowerCase().indexOf('msie 6.0;')>1){26         if(checkFixed()){27             return ;28         }//只需对不支持固定定位的浏览器做处理29         30         //将下面需要使用的dom相关操作在scrollDiv外面提取一次，避免多次dom操作31         var fixedObj = document.getElementById("myDiv"),32             height = fixedObj.offsetHeight,//标签高度提前读取出来33             firstTop =getTop(fixedObj),//记录页面一开始标签所在位置34             timer;35             window.onscroll = function(){//这里做个延时执行，可以减少scroll执行频率36                 clearTimeout(timer);37                 timer = setTimeout(function(){38                     scrollDiv()39                 },30);40             }41 42         function scrollDiv(){43             var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;44             fixedObj.style.top=(firstTop+scrollTop)+'px';45         }46         //获取元素在页面里top值47         function getTop(obj) {48             var top = 0;49             while(obj){50                 top += obj.offsetTop;51                 obj = obj.offsetParent;52             }53             return top;54         }55         //判断浏览器是否支持固定定位56         function checkFixed(){57             var o = document.createElement('div'),58                 body = document.getElementsByTagName('body')[0],59                 fig = false;60             body.insertBefore( o, body.firstChild );61             o.style.cssText ='position:fixed;top:20px;margin:0;padding:0;border:none;width:0px;height:0px;';62             fig = o.offsetTop==20;63             body.removeChild(o);64             return fig;65         }66     })()67   </script>68   </body>69   </html>

 

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：DIV CSS 网页兼容全搞定_html/css_WEB-ITnoseArticle suivant：下拉的DIV+CSS+JS二级树型菜单_html/css_WEB-ITnose

Articles Liés

Voir plus