通过css/js来固定div的位置
2013-03-11 22:24 Truke 阅读(656) 评论(0) 编辑 收藏 举报一:先来看看用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>