div固定定位完美兼容如回顶部图标
|
admin
2014年4月21日 15:32
本文热度 6204
|
在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;}
上面注释的三个地方的值要设置成一致，即是固定div离窗口顶部的距离，上面代码中固定div离窗口顶部的距离为0。
CSS中最后一句代码是解决固定div在IE6下滚动条滚动的时候闪动的问题。
该文章在 2014/4/21 15:32:04 编辑过
400 186 1886
