css+js ie6 fixed bug的解決方法
復制代碼代碼如下:
#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代碼
復制代碼代碼如下:
script language="javascript" type="text/javascript"
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"
html xmlns="http://www.w3.org/1999/xhtml"
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
title無標題文檔/title
style type="text/css"
*
{
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
div id="topNavWrapper"
ul class="jd_menu" id="topNav"
/ul
/div
這里是大量的br換行標簽 。
div class="show"show/div
/body
/html
since1984應該利用類似的技術實現其底部半透明框框
【css js ie6 fixed bug的解決方法】
