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中“+=”的应用
Feb 02 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
javascript打开word文档的方法
Apr 16 Javascript
js实现非常棒的弹出div
Oct 06 Javascript
Angular的MVC和作用域
Dec 26 Javascript
AngularJS表单基本操作
Jan 09 Javascript
BootStrap表单时间选择器详解
May 09 Javascript
js评分组件使用详解
Jun 06 Javascript
node.js中http模块和url模块的简单介绍
Oct 06 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
微信小程序canvas拖拽、截图组件功能
Sep 04 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
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
php 购物车完整实现代码
2014/06/05 PHP
php+mysql数据库查询实例
2015/01/21 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
关于JS中的闭包浅谈
2013/08/23 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
jQuery中$.grep() 过滤函数 数组过滤
2016/11/22 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
Node调用Java的示例代码
2017/09/20 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
js编写简易的计算器
2020/07/29 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
python查看zip包中文件及大小的方法
2015/07/09 Python
python pytest进阶之fixture详解
2019/06/27 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
机关副主任个人四风问题整改措施
2014/09/26 职场文书
Python操作CSV格式文件的方法大全
2021/07/15 Python
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技