如何解決IE6下position fixed失效的問題

這篇文章主要講解了“如何解決IE6下position fixed失效的問題”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何解決IE6下position fixed失效的問題”吧！

代碼如下:

<!--[if IE 6]>
<script type="text/javascript">
(function($) {
jQuery.fn.Fixed = function(options) {
var defaults = {
x:0,
y:0
};
var o = jQuery.extend(defaults, options);
var isIe6 = !window.XMLHttpRequest;
var html= $('html');
if (isIe6 && html.css('backgroundAttachment') !== 'fixed') { //防止抖動
html.css('backgroundAttachment','fixed')
.css('backgroundImage','url(about:blank)');
};
return this.each(function() {
var domThis=$(this)[0];
var objThis=$(this);
if(isIe6){
objThis.css('position' , 'absolute');
domThis.style.setExpression('left', 'eval((document.documentElement).scrollLeft + ' + o.x + ') + "px"');
domThis.style.setExpression('top', 'eval((document.documentElement).scrollTop + ' + o.y + ') + "px"');
} else {
objThis.css('position' , 'fixed').css('top',o.y).css('left',o.x);
}
});
};
})(jQuery)
</script>
<![endif]-->

調用方法如下：

代碼如下:

<!--[if IE 6]>
<script type="text/javascript">
$(function(){
$('.float').Fixed({x:800,y:200});
});
</script>
<![endif]-->

fixed一般應用有兩種情況。

一，居中的彈層：

代碼如下:

<!--[if IE 6]>
<script type="text/javascript">
$(function(){
//centerX和centerY是可視窗口的高和寬，需要減去自身的的寬度或高度的一半才能居中
var screenHeight=document.documentElement.clientHeight,
　　screenWidth=document.documentElement.clientWidth,
floatHeight=$('.float').height(),
floatWidth=$('.float').width();
$('.float').Fixed({
x:(screenWidth-floatWidth)/2,
y:(screenHeight-floatHeight)/2
});
});
</script>
<![endif]-->

二，靠右的彈層，類似于回到頂部等：

代碼如下:

<!--[if IE 6]>
<script type="text/javascript">
$(function(){
//centerX和centerY是可視窗口的高和寬，高度自定義，寬度為屏幕寬度-浮層寬度
var screenHeight=document.documentElement.clientHeight,
　　screenWidth=document.documentElement.clientWidth,
floatHeight=$('.float').height(),
floatWidth=$('.float').width();
$('.float').Fixed({
x:screenWidth-floatWidth,
y:300
});
});
</script>
<![endif]-->

感謝各位的閱讀，以上就是“如何解決IE6下position fixed失效的問題”的內容了，經過本文的學習后，相信大家對如何解決IE6下position fixed失效的問題這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！