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 相关文章推荐
document.compatMode介绍
May 21 Javascript
Extjs入门之动态加载树代码
Apr 09 Javascript
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
js中typeof的用法汇总
Dec 12 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
layui实现动态和静态分页
Apr 28 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
微信小程序 弹窗输入组件的实现解析
Aug 12 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学习之整理字符串
2011/04/17 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
对于this和$(this)的个人理解
2013/09/08 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
java必学必会之static关键字
2015/12/03 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
python在linux中输出带颜色的文字的方法
2014/06/19 Python
详解Python的单元测试
2015/04/28 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
python将数组n等分的实例
2019/12/02 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
Python同时处理多个异常的方法
2020/07/28 Python
Python安装Bs4的多种方法
2020/11/28 Python
Ruby如何定义一个类
2012/10/08 面试题
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
北大研究生linux应用求职信
2013/10/29 职场文书
村官学习十八大感想
2014/01/15 职场文书
户外婚礼策划方案
2014/02/08 职场文书
财务负责人任命书
2014/06/06 职场文书
学前班语言教学计划
2015/01/20 职场文书
董事长岗位职责
2015/02/13 职场文书