首页 > 网站 > WEB开发 > 正文

IE6下fixed失效的解决方法

2024-04-27 14:33:17
字体:
来源:转载
供稿:网友
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]-->

这下就妥妥的了。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表