1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 5 <title>右下角div固定</title> 6 <style type="text/css"> 7 html, body 8 { 9 padding: 0; 10 margin: 0; 11 } 12 </style> 13 </head> 14 <body> 15 <div id="aa" style="width: 100px; height: 100px; background: #c0c0c0;">随平滚懂div</div> 16 <div id="bb" style="width: 100px; height: 100px; background: #c0c0c0;">静止不动div</div> 17 <div style="width: 100%; height: 1500px; background: #000"></div> 18 <div style="width: 100%; height: 1500px; background: green"></div> 19 <div style="width: 100%; height: 1500px; background: red"></div> 20 </body> 21 </html> 22 <script type="text/javascript"> 23 function scrollx(p) { 24 var d = document, dd = d.documentElement, db = d.body, w = window, o = d.getElementById(p.id), ie6 = /msie 6/i.test(navigator.userAgent), style, timer; 25 if (o) { 26 o.style.cssText += ";position:" + (p.f && !ie6 ? 'fixed' : 'absolute') + ";" + (p.l == undefined ? 'right:0;' : 'left:' + p.l + 'px;') + (p.t != undefined ? 'top:' + p.t + 'px' : 'bottom:0'); 27 if (p.f && ie6) { 28 o.style.cssText += ';left:expression(documentElement.scrollLeft + ' + (p.l == undefined ? dd.clientWidth - o.offsetWidth : p.l) + ' + "px");top:expression(documentElement.scrollTop +' + (p.t == undefined ? dd.clientHeight - o.offsetHeight : p.t) + '+ "px" );'; 29 dd.style.cssText += ';background-image: url(about:blank);background-attachment:fixed;'; 30 } else { 31 if (!p.f) { 32 w.onresize = w.onscroll = function () { 33 clearInterval(timer); 34 timer = setInterval(function () { 35 //双选择为了修复chrome 下xhtml解析时dd.scrollTop为 0 36 var st = (dd.scrollTop || db.scrollTop), c; 37 c = st - o.offsetTop + (p.t != undefined ? p.t : (w.innerHeight || dd.clientHeight) - o.offsetHeight); 38 if (c != 0) { 39 o.style.top = o.offsetTop + Math.ceil(Math.abs(c) / 10) * (c < 0 ? -1 : 1) + 'px'; 40 } else { 41 clearInterval(timer); 42 } 43 }, 10) 44 } 45 } 46 } 47 } 48 } 49 scrollx({ 50 id: 'aa' 51 }) 52 scrollx({ 53 id: 'bb', 54 l: 0, 55 t: 200, 56 f: 1 57 }) 58 /* 59 id 你要滚动的内容的id 60 l 横坐标的位置 不写为紧贴右边 61 t 你要放在页面的那个位置默认是贴着底边 0是贴着顶边 62 f 1表示固定 不写或者0表示滚动 63 */ 64 </script>
本文来自：http://www.jzxue.com/wangyesheji/wangyetexiao/201011/09-4940.html
方式二：纯css控制且半透明效果，但兼容性较差
1 #div_digg{ position:fixed; _position:absolute;z-index:1000;bottom:0; right:0; _right:17px; background-color:#FFFFFF;border:2px solid red;filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5; }
右下角固定层效果，用于广告的较多。这里既然在网上看到，收藏在此。以备不时之需......
| 博客地址： | http://www.cnblogs.com/wolf-sun/ |
| 博客版权： | 本文以学习、研究和分享为主，欢迎转载，但必须在文章页面明显位置给出原文连接。 如果文中有不妥或者错误的地方还望高手的你指出，以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下！如果你有更好的建议，不如留言一起讨论，共同进步！ 再次感谢您耐心的读完本篇文章。 转自：http://www.cnblogs.com/wolf-sun/p/3326149.html |