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 相关文章推荐
jQuery滚动加载图片效果的实现
Mar 06 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
微信小程序实现省市区三级地址选择
Jun 21 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 Javascript
Vue实现计算器计算效果
Aug 17 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 验证码(倾斜,正弦干扰线,黏贴,旋转)
2013/06/29 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
摘自启点的main.js
2008/04/20 Javascript
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
清除输入框内的空格
2016/12/21 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
vue webpack打包后图片路径错误的完美解决方法
2018/12/07 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
宣传标语大全
2014/07/01 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
护士节慰问信
2015/02/15 职场文书
学习保证书怎么写
2015/02/26 职场文书
出国留学自荐信模板
2015/03/06 职场文书
企业投资意向书
2015/05/09 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
7个关于Python的经典基础案例
2021/11/07 Python
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python
mybatis 获取更新记录的id
2022/05/20 Java/Android
pandas中pd.groupby()的用法详解
2022/06/16 Python
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS