js控制固定div和随屏滚动div兼容多浏览器和纯css控制(来自网络)

js控制固定div和随屏滚动div兼容多浏览器和纯css控制(来自网络),第1张

概述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, body8 {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为 036 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: 157 })58 /*59 id 你要滚动的内容的id60 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; }右下角固定层效果,用于广告的较多。这里既然在网上看到,收藏在此。以备不时之需......

<div >

              右下角div固定                                      随平滚懂div     静止不动div                                                                                                                                                                                                                                   

本文来自:href="http://www.jzxue.com/wangyesheji/wangyetexiao/201011/09-4940.HTML">http://www.jzxue.com/wangyesheji/wangyetexiao/201011/09-4940.HTML 

方式二:纯CSS控制且半透明效果,但兼容性较差

{:;:;:;:;:;:;:;:;:;:;:; }

右下角固定层效果,用于广告的较多。这里既然在网上看到,收藏在此。以备不时之需......

总结

以上是内存溢出为你收集整理的js控制固定div和随屏滚动div兼容多浏览器和纯css控制(来自网络)全部内容,希望文章能够帮你解决js控制固定div和随屏滚动div兼容多浏览器和纯css控制(来自网络)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1145571.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-31
下一篇 2022-05-31

发表评论

登录后才能评论

评论列表(0条)

保存