NO.28 滚动条滚动层固定位置不变 - 00fairy00

当页面有滚动条时候，如果在顶部有一个层，我们希望那个层始终都在那个位置不随滚动条滚动

可以用以下方法实现

代码

<!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=utf-8" />
<title>滚动条滚动层固定</title>
<style>
*{
    padding:0px;
    margin:0px;
}
.container{
    height:1000px;
    background:#CCC;
}
.suspend_box{
    width:100px;
    height:50px;
    background:#F00;
    border:3px dashed #000;
    position:fixed;
    left:20px;
    top:20px;
    _position:absolute;/*IE6不支持position:fixed，这里hack一下*/
    _top:expression(eval(document.documentElement.scrollTop+20));/*IE6不支持position:fixed，这里hack一下*/
}
</style>
</head>

<body>
<div class="container">
    <div class="suspend_box"></div>
</div>
</body>
</html>

由于IE6是不支持IE6不支持position:fixed，所以这里hack一下

_position:absolute;/*IE6不支持position:fixed，这里hack一下*/
_top:expression(eval(document.documentElement.scrollTop+20));/*IE6不支持position:fixed，这里hack一下*/

posted on 2010-01-11 16:18 00fairy00 阅读(758) 评论(0) 收藏举报

刷新页面返回顶部