很多時時候，我們需要讓某個元素始終位于瀏覽器的某一個位置，不會因為瀏覽器窗口的縮放和滾動條的滾動而變化刻恭，那個第一個想到的肯定是用position:fixed生成固定定位翠订，然后依靠其值定位，就能達到其需求激才⊥匦停可是當其他瀏覽器都正常顯示的時候，只有IE6不那么完美瘸恼。一般百度的時候就會發(fā)現(xiàn)IE6下各種奇葩問題都有劣挫，固定定位也算是一大難題，下面介紹的是如何使用CSS Hack解決IE6瀏覽器下不支持position:fixed屬性的辦法东帅。
<div style="width:100%; height:5000px;">
<div class="fixedTop"></div>
<div class="fixedBottom"></div>
<div class="fixedLeft"></div>
<div class="fixedRight"></div>
</div>
.fixedTop,
.fixedBottom,
.fixedLeft,
.fixedRight{
width:100px;
height:100px;
background:#f00;
position:fixed;
}
.fixedTop{
top:0;
}
.fixedBottom{
bottom:0;
}
.fixedLeft{
left:0;
}
.fixedRight{
right:0;
}
- 以上為常用的固定定位的方式压固，用
position:fixed生成固定定位，設(shè)置其div的top,bottom,left以及right屬性來進行位置的定位靠闭。
文章的開頭也提頭帐我，IE6下面是不支持position:fixed的，那么為了讓IE6也能夠?qū)崿F(xiàn)現(xiàn)樣的效果愧膀，那么就只能通過position:absolute來模擬其效果
.fixedTop,
.fixedBottom,
.fixedLeft,
.fixedRight{
width:100px;
height:100px;
background:#f00;
position:fixed;
_position:absolute;
}
/*固定到頭部*/
.fixedTop{
top:0;
_top:expression(documentElement.scrollTop);
}
/*固定到底部,'-30'可以修改其值*/
.fixedBottom{
bottom:0;
_top:expression(documentElement.scrollTop+documentElement.clientHeight-this.clientHeight-30);
}
/*固定到左邊*/
.fixedLeft{
left:0;
_left:expression(documentElement.scrollLeft);
}
/*固定到右邊*/
.fixedRight{
right:0;
_left:expression(documentElement.scrollLeft+documentElement.clientWidth-this.clientWidth);
}
- 這樣就能夠?qū)崿F(xiàn)IE6下固定定位的問題了焚刚，如果你想要其定位的位置，可以修改其中的數(shù)值控制元素的位置扇调。
現(xiàn)在矿咕，問題還沒有完全解決。在用了上面的辦法后狼钮，你會發(fā)現(xiàn)：被固定定位的元素在滾動滾動條的時候會閃動碳柱。解決閃動問題的辦法是在 CSS 文件中加入：
/*----防止抖動---*/
body{
_background-image:url(about:blank); /* for IE6 */
_background-attachment:fixed; /*必須*/
}
到此，IE6 的 position:fixed; 問題已經(jīng)被解決了熬芜。
PS：如果有童鞋覺得這樣子寫不是很好的話莲镣，可以用JS來解決此問題。
$(function(){
function reCal(){
var screenHelpwidth,
screenHelpheight,
myHelptop,
getPosHelpLeft,
getPosHelpTop;
screenHelpwidth = $(window).width();
screenHelpheight = $(window).height();
myHelptop = $(document).scrollTop(); //獲取滾動條距頂部的偏移
//計算彈出層的left
getPosHelpLeft = screenHelpwidth / 2 - 320;
//計算彈出層的top
getPosHelpTop = screenHelpheight / 2 - 225;
//css定位彈出層
$("#boxcenter").css({"left": getPosHelpLeft, "top": getPosHelpTop + myHelptop});
}
reCal();
//當瀏覽器窗口大小改變時...
$(window).on('resize scroll',reCal);
});
