解决 ie6 fixed bug (css+js)

#fixed {
    position: absolute;
    top: 0;
    left: 0;
    width: 10em;
    height: 100%;
}

body > #fixed {
position: fixed;
}

#content {
margin-left: 10em;
background:red;
height:800px;
}

利用css选择器覆盖原position的属性值；

fixed层的父层需是body才能这样实现；

但是这样还不完美并不能完全实现效果，因为不会随body页面拉动而滚动

要实现随body页面滚动而滚动需添加以下js代码

function fixedPop1(){

var m=60; //top值

var obj=document.getElementById("TopDivInner"); //position:fixed对象

var n=50; //top值

var obj2=document.getElementById("TopDiv"); //position:fixed对象

window.onscroll=function(){obj2.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px';

obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+m+'px';

}

window.onresize=function(){obj2.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px';

obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+m+'px';

}

};

$(function(){

fixedPop1();

});

</script>

豆瓣的弹出登陆框就是利用这样的方式实现的，当然要在js代码上加 if IE6的

到此，加上通过js判断屏幕分辨率进而改变弹出框的位置，使其更加合理化，就基本完成了豆瓣弹出登陆款的实现

然而这个在ie6下存在拖动滚动条引起登陆框闪动的问题，为解决这个问题可以利用css e xpression 代价是更高的内存占用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

{

margin: 0px;

padding: 0px;

}

body {

background-image: url(http://global.tianya.cn/global/gnav/css/nothing.txt);

background-attachment: fixed; /* prevent screen flash in IE6 */

}

#topNavWrapper {

width: 980px;

text-align: left;

height: 31px;

margin: 0px auto;

z-index:100;

_position: relative ;

_top:0px;

}

#topNav {

width: 980px;

float: left;

display: block;

z-index: 100;

overflow: visible;

position: fixed;

top: 0px; /* position fixed for IE6 */

_position: absolute;

_top: expression(documentElement.scrollTop + "px");

background-image: url(http://global.tianya.cn/global/gnav/images/top_r.gif);

background-repeat: no-repeat;

background-position: right;

height: 31px;

}

.show{

position:absolute;

top:500px;

left:400px;

border:#ff0000 1px solid;

}

</style>

</head>

<body>

</ul>

</div>

</body>

</html>

since1984应该利用类似的技术实现其底部半透明框框

posted on 2010-01-10 16:28 nidilzhang 阅读(1106) 评论(0) 编辑收藏举报