IE6下fixed失效的解决方法

王朝学院·作者佚名  2016-05-24
窄屏简体版  字體: 小  |  中  |  大  |  超大  

IE6下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]-->

这下就妥妥的了。

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航