目前網(wǎng)上有的比較多的是這種解決方案(純CSS):
html{overflow:hidden;}
body{height:100%;overflow:auto;}
#rightform form{position:absolute;right:30px;top50px;}
這個方法有一個bug未解決:在IE6下會把所有position:absolute都變成“浮動”的元素;還有使用js方法滾動滾動條時會出現(xiàn)對象閃爍,如下方法結(jié)合了CSS和js的辦法,解決了以上的問題。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>IE6 fixed</title>
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
body {
_background-image: url(about:blank); /*用瀏覽器空白頁面作為背景*/
_background-attachment: fixed; /* prevent screen flash in IE6 確保滾動條滾動時,元素不閃動*/
}
#topNav {
width: 980px;
z-index: 100; /*設(shè)置浮動層次*/
overflow: visible;
position: fixed;
top: 50px; /* 其他瀏覽器下定位,在這里可設(shè)置坐標(biāo)*/
_position: absolute; /*IE6 用absolute模擬fixed*/
_top: expression(documentElement.scrollTop + 50 + "px"); /*IE6 動態(tài)設(shè)置top位置*/
/* documentElement.scrollTop 設(shè)置浮動元素始終在瀏覽器最頂,可以加一個數(shù)值達(dá)到排版效果 */
background-color:#0000FF;
height: 31px;
}
.show{
position:absolute;
top:500px;
left:400px;
border:#ff0000 1px solid;
}
</style>
</head>
<body>
<div class="jd_menu" id="topNav">1111</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="show">show</div>
</body>
</html>
只實(shí)現(xiàn)了垂直方向的fixed。若要實(shí)現(xiàn)水平方向的fixed,設(shè)置_left:expression(documentElement.scrollLeft + "px");
利用給<body>設(shè)置固定的背景,防止?jié)L動條滾動時的閃動;如果<body>中要設(shè)置滾動的背景而產(chǎn)生沖突,可以把代碼寫在html選擇器里面,如:
html {
_background-image: url(about:blank);
_background-attachment: fixed; /* prevent screen flash in IE6 */
}
body {
background-image: url(1.jpg);
background-attachment: scroll;
}
參考文章:http://www.wxwdesign.cn/article/skills/ie6_position_fixed_debug.htm