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的滚动条. ...

随机推荐

MongoDB wiredTiger存储引擎下的存储方式LSM和B-Tree比较
前段时间做拦截件监控的时候把拦截件生命期存入mongodb,因生命期有各种变化,因此对此表的更新写操作非常多,老大给我看了一篇文章,才知道mongodb已经支持lsm存储方式了. 原文如连接:http ...
java多线程-ThreadLocal
大纲: 用法源码一.用法 ThreadLocal是一个容器,顾名思义就是把一个变量存到线程本地. class Test { public static void main(String[] arg ...
thymeleaf常用语法
常用标签语法:①th:text1注释:如果${name}有值则将替换掉1的值,若无则为1 ②t ...
Case When ELSE END语句
一.简介.Case When ELSE END共有两种用法: 说实话,这种就是数据库版的switch语句,但是只是形式上很像,实际上还是有差别的!!! Create Table Test6( ...
CSS ::Selection的使用方法
大家都知道浏览器对选中的文本默认样式都是统一的,Windows下是一个深蓝色的背景,白字的前景,而在Mac下是一个淡蓝色背景,白色字体,就如上图所展示的一样,自从有了这个“::selection”选择 ...
html中文乱码(解决办法)
在head标签中加上以下代码即可: <head> <meta http-equiv="Content-Type" content="text/h ...
python 网络编程——客户端
网络通信的基本接口是socket,它扩展了操作系统的基本I/O到网络网络通信.socket可以通过socket()函数来建立,通过connect()函数来连接.得到了socket,可以确定本地和远程端 ...
RequireJs使用快速入门
前言:Requirejs作为一个ES5环境流行的模块加载器,在很多项目中使用它.而且这个开源库任然在更新,同类产品seajs已经不更新了. ES6之后引入import 或者使用Commonjs的方式引 ...
Codeforces 936E. Iqea
Description 给出一张四连通网格图,其中有 $n$ 个点是连通的,维护以下两种操作: 1.把某个点变黑 2.给出一个白点,查询离这个白点最近的黑点的距离题面 Solution 我们把每 ...
HTTP POST上传文件说明及注意事项
这一阵子因为项目需要要对接别家公司的restful接口,其中有一个接口是上传视频文件.接着上网找找资料.后来文件是上传成功了,但上服务器一看,文件没有后缀,我勒个去,这是什么个鬼.接着继续找资料,最终 ...

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

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

随机推荐

热门专题