Rumah >hujung hadapan web >html tutorial >通过css/js来固定div的位置_html/css_WEB-ITnose
通过css/js来固定div的位置_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 12:27:421018semak imbas
一：先来看看用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>
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：DIV CSS 网页兼容全搞定_html/css_WEB-ITnoseArtikel seterusnya：下拉的DIV+CSS+JS二级树型菜单_html/css_WEB-ITnose