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

简介:
复制代码
 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
目录
相关文章
|
6天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的网络在线考试系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的网络在线考试系统附带文章源码部署视频讲解等
10 0
基于springboot+vue.js+uniapp的网络在线考试系统附带文章源码部署视频讲解等
|
11天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
12天前
|
JavaScript 前端开发 容器
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
15 2
|
12天前
|
JavaScript 前端开发
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
12 1
|
4天前
|
测试技术 API Android开发
autox.js如何监听异常情况,比如网络中断、内存慢、应用死机或者页面无响应
autox.js如何监听异常情况,比如网络中断、内存慢、应用死机或者页面无响应
|
6天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的网络互联实验平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的网络互联实验平台附带文章源码部署视频讲解等
11 0
|
12天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】3d-boxes-background
【HTML+CSS+JavaScript】3d-boxes-background
7 0
|
12天前
|
前端开发 JavaScript
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
12 0
|
2月前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
69 0
|
2月前
|
Web App开发 JavaScript 前端开发
浏览器与Node.js事件循环:异同点及工作原理
浏览器与Node.js事件循环:异同点及工作原理