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

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>
</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>

<!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>

方法二：

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

<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" style="overflow: hidden;">

 <!-- div来实现 -->

 <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%;">

  居中的层

 </div>

</body>

方法三：

<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" style="overflow: hidden;">
<iframe src="http://www.csdn.net/" 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>

<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" style="overflow: hidden;">

 <!-- iframe来实现  -->

 <iframe src="http://www.csdn.net/" 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;">始终在中间
</div>
</body>
</html>

<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>

div浮层，滚动条移动，保持位置不变的4种方法的更多相关文章

让div盒子相对父盒子垂直居中的几种方法
div相对于父盒子垂直居中的几种方法,之前在网上看到很多种方法,确实说的很对,也很具体,但是我感觉对于初学者来说,一目了然是最重要的,所以,我把很高深的技巧,和很复杂的css样式都剔除掉,旨在让更多人 ...
div盒子水平居垂直中的几种方法
div盒子水平居垂直中的几种方法<!DOCTYPE html><html> <head> <mete charset="ut ...
VS编程，WPF中两个滚动条 ScrollViewer 同步滚动的一种方法
原文:VS编程,WPF中两个滚动条 ScrollViewer 同步滚动的一种方法版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/ar ...
设置一个DIV块固定在屏幕中央（两种方法）
设置一个DIV块固定在屏幕中央(两种方法) 方法一: 对一个div进行以下设置即可实现居中. <style> #a{ position: fixed; top: 0px; left: 0p ...
【css面试题】三个DIV要求水平对齐，左右两个DIV宽度固定为100px，中间那个DIV充满剩余的宽度（至少2种方法）
这是我在一家公司面试时遇到的问题,当时没有答上来!! 所以看到的小伙伴一定要注意了!! 变化浏览器宽度可看到效果: 左右中然后我们来看看代码: 第一种方法:(浮动) <style type ...
让块元素在div中水平居中，并且垂直居中的五种方法
在写代码前,先做下准备工作,写两个div,设置下div的大小,把小的div放在大的div里面.可以给小的div设置下颜色,方便观看. 方法一:写一个伪元素,将它设置为行内块元素,高度与父元素相同,写一 ...
如何通过JQuery将DIV的滚动条滚动到指定的位置
这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置,方便自动定位. var container = $('div'), inner = $('#inner'); container.scrol ...
div 加滚动条
div 加滚动条的方法: <div style="position:absolute; height:400px; overflow:auto"></div> ...
[聊天框]让DIV的滚动条自动滚动到最底部 - 4种方法
要制作一个在线聊天的程序,在做最后的修饰时,需要对获得的信息即时滚动以保证用户总能看到最新消息. 聊天程序是基于AJAX设计的,没有用框架,消息容器是一个DIV,所以问题就在于如何控制DIV的滚动条. ...

随机推荐

HttpClient登陆后获取并携带cookies发起请求
最近项目中,用到了登陆后获取并携带cookies发起请求的业务场景,现总结写出来备忘一下. 1.定义存取cookies信息的全局变量 public class HttpUtil { /** * 用来存 ...
python调用另一个.py文件中的类和函数
同一文件夹下的调用 1.调用函数 A.py文件如下:def add(x,y): print('和为:%d'%(x+y)) 在B.py文件中调用A.py的add函数如下: import AA.ad ...
Docker搭建tomcat运行环境（Dockerfile方式）
上一篇文章的基本做法是通过centOS的官方镜像启动一个容器,然后进入到容器中,手动敲命令安装JDK跟tomcat,这个跟在linux下搭建没有什么区别,只是用来熟悉docker命令,并且在日常开发中 ...
MyBatis整合Spring详细教程
1整合思路 1.SqlSessionFactory对象应该放到spring容器中作为单例存在. 2.传统dao的开发方式中,应该从spring容器中获得sqlsession对象. 3.Mapper代理 ...
【LESS系列】基本语法
这里将直接以实例的方式展示 LESS 的基本语法. less code 是编译前的代码,css code 是编译后的代码. 本文的内容,同样是引自[http://www.ibm.com/develop ...
javah找不到类文件
这样即可,在src目录下寻找类,类要写全,即包名.类名
OpenGL初识
OpenGL 概念 OpenGL提供的是一系列接口, 它是指一个规范, OpenGL规范严格规定了每个函数该如何执行, 以及它们的输出值, 具体的实现是由各个显示设备厂商, 它作为本地系统库直接运行在 ...
编译器错误消息: CS0012: 类型“System.Object”在未被引用的程序集中定义。必须添加对程序集“System.Runtime, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a”的引用。
编译器错误消息: CS0012: 类型“System.Object”在未被引用的程序集中定义.必须添加对程序集“System.Runtime, Version=4.0.0.0, Culture=neu ...
Table Code
post.PostToTags.Where(t => tagArray.Contains(t.PostTag.Name, comparerWihtoutCases) && !t. ...
openlayers 各种图层，持续更新
/*高德地图*/ var vectorLayerLine = new ol.layer.Tile({ source: new ol.source.XYZ({ urls: [ "http:// ...

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

div浮层，滚动条移动，保持位置不变的4种方法的更多相关文章

随机推荐

热门专题