您的位置:首页 > 其它

IE6下position fixed失效的解决方法(亲测有效)

2014-08-19 10:25 387 查看
在网上找了好久,终于找到一种亲测有效的解决方法。

<!--[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]-->

这下就妥妥的了。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: