div固定定位完美兼容如回顶部图标

WindySky 2014-11-07

展开全文

在div定位中，我们经常用到div固定浮于页面上面，而且希望不管在什么条件下，它都是固定不动的，当滚动条滚动的时候它也静止不动、而且不闪动。固定定位（fixed）IE6又不支持，让IE6固定下来，且不闪动是件不容易的事情。不容易也得办啊，谁让IE6还不死呢？

　　解决办法：这里分两种方式固定DIV。相对于网页窗口，一是从上往下固定，二是从下往上固定。

HTML代码：

<body style="height:2000px">
<div id="fixedTop">风吹不动，雷打不动，我就定在这愁着你！(从上往下固定我)</div>
<div id="fixedBottom">风吹不动，雷打不动，我就定在这愁着你！(从下往上固定我)</div>
</body>

　　1、从下往上固定：意思就是说从窗口底部往上调整固定距离从而固定DIV的位置。

CSS代码：

body{margin:0px; padding:0px;}
#fixedBottom{
position:fixed; bottom:0px; "//可自定义bottom的值，离窗口底部的距离"
_position:absolute; _bottom:0px;"//可自定义bottom的值，离窗口底部的距离"
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginBottom,10)||0)));"//可自定义修改“||”后面的值，也是离窗口底部的距离，和上面bottom的值保持一致"
width:100%; height:30px; line-height:30px; border:1px solid #ccc;
}
*html{background-image:url(about:blank);background-attachment:fixed;}

　　上面注释的三个地方的值要设置成一致，即是固定div离窗口底部的距离，上面代码中固定div离窗口底部的距离为0。

　　2、从上往下固定：意思就是说从窗口顶部往下调整固定距离从而固定DIV的位置。

CSS代码：

body{margin:0px; padding:0px;}
#fixedTop{
position:fixed; top:0px; "//可自定义top的值，离窗口底部的距离"
_position:absolute; _top:0px;"//可自定义top的值，离窗口底部的距离"
_top:expression(eval(document.documentElement.scrollTop+(parseInt(this.currentStyle.marginTop,10)||0)));"//可自定义修改“||”后面的值，也是离窗口顶部的距离，和上面top的值保持一致"
width:100%; height:30px; line-height:30px; border:1px solid #ccc;
}
*html{background-image:url(about:blank);background-attachment:fixed;}