div浮层,滚动条移动,位置保持不变的4种方法汇总


Posted in Javascript onDecember 11, 2013

div在顶部不变、滚动条滚动,div还是在顶部!直接上传源码了:

方法一:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<html xmlns="http://www.w3.org/1999/xhtml ">
<head> 
<title>div浮层,滚动条移动,保持位置不变</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
body{background-image:url(about:blank);background-attachment:fixed;}
#float{width:344px;height:34px;border:1px solid #C0DBF8;position:absolute;top:0px;}
</style> 
</head> 
<body>
<div id="float" >ddd</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body> 
<script type="text/javascript">
var IO=document.getElementById('float'),Y=IO,H=0,IE6;
IE6=window.ActiveXObject&&!window.XMLHttpRequest;
while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
if(IE6)
    IO.style.cssText="position:absolute;top:(this.fix?(document.documentElement.scrollTop-(this.javascript||"+H+")):0)";
window.onscroll=function (){
    var d=document,s=Math.max(d.documentElement.scrollTop,document.body.scrollTop);
    if(s>H&&IO.fix||s<=H&&!IO.fix)return;
    if(!IE6)IO.style.position=IO.fix?"":"fixed";        
    IO.fix=!IO.fix;
};
try{document.execCommand("BackgroundImageCache",false,true)}catch(e){};
</script> 
</html>

方法二:
<STRONG><body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" style="overflow: hidden;">
 <!-- div</STRONG>来实现<STRONG> -->
 <div style="width: 100%; height: 100%; overflow: scroll;">
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 </div>
<div style="border: 1px red solid; width: 300px; height: 300px;margin:-150px 0 0 -150px; position: absolute; left: 50%; top: 50%;"></STRONG>
  居中的层
<STRONG> </div>
</body></STRONG>

方法三:
<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" style="overflow: hidden;">
 <!-- iframe来实现  -->
 <iframe src="https://3water.com" width="100%" height="100%" frameborder="0"></iframe>
<div style="border: 1px red solid; width: 300px; height: 300px;margin:-150px 0 0 -150px; position: absolute; left: 50%; top: 50%;">
 居中的层
 </div>
</body>

方法四:[采用css来居中]
<style type="text/css">
<!--
html,body {height:100%; margin:0px; font-size:12px;}
.mydiv {
background-color: #f9fff6;
border: 1px solid #009900;
text-align: center;
line-height: 25px;
font-size: 13px;
font-weight: bold;
z-index:99;
width: 300px;
height: 50px;
left:50%;/*FF IE7*/
top:50%;/*FF IE7*/
margin-left:-150px!important;/*FF IE7 half of its width */
margin-top:-60px!important;/*FF IE7 half of its height*/
margin-top:0px;
position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/
_top:       expression(eval(document.compatMode &&
            document.compatMode=='CSS1Compat') ?
            documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
            document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}
--> 
</style>
<script language="javascript" type="text/javascript">
function showDiv(){
document.getElementById('popDiv').style.display='block';
}
window.onload=function(){
    showDiv();
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>始终在中间DIV (支持IE FF)</title>
</head>
<body>
<div id="popDiv" class="mydiv" style="display:none;">始终在中间<br/>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
Javascript 相关文章推荐
javascript 检测浏览器类型和版本的代码
Sep 15 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
原生js实现模拟滚动条
Jun 15 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
Aug 19 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
JS简单判断函数是否存在的方法
Feb 13 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 Javascript
在小程序开发中使用npm的方法
Oct 17 Javascript
基于javascript的拖拽类封装详解
Apr 19 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 Javascript
判断javascript的数据类型(示例代码)
Dec 11 #Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 #Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 #Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 #Javascript
js为空或不是对象问题的快速解决方法
Dec 11 #Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 #Javascript
javascript弹出层输入框(示例代码)
Dec 11 #Javascript
You might like
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
解决vue项目,npm run build后,报路径错的问题
2020/08/13 Javascript
python进程类subprocess的一些操作方法例子
2014/11/22 Python
Python实现在线程里运行scrapy的方法
2015/04/07 Python
Python 多进程和数据传递的理解
2017/10/09 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
python实现AES加密和解密
2019/03/27 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
争先创优演讲稿
2014/09/15 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
优秀班组申报材料
2014/12/25 职场文书
社区植树节活动总结
2015/02/06 职场文书
卡特教练观后感
2015/06/08 职场文书
建筑工程催款函
2015/06/24 职场文书
详解Spring事件发布与监听机制
2021/06/30 Java/Android