jquery实现IE6支持position:fixed

引用自:http://www.oschina.net/code/snippet_260395_9548 我做了点修改,原来的有点鸡肋,样式必须CSS放到head里面才行,现在可以直接放到任何地方了,比如<div style="……">

首先是ie6fixed.js,这个是兼容IE6的 position:fixed插件,是修改过的,使用时把它复制到ie6fixed.js中

(function($){
var isIE = !!window.ActiveXObject;var isIE6 = isIE && !window.XMLHttpRequest;var isIE8 = isIE && !!document.documentMode && (document.documentMode == 8);var isIE7 = isIE && !isIE6 && !isIE8;
if (isIE6 || isIE7) { //ie6 | ie7 | ie8 not in standards mode
	$().ready(function(){
		var body = document.body;
		var BLANK_GIF;
		if (body.currentStyle.backgroundAttachment != "fixed") {
			if (body.currentStyle.backgroundImage == "none") {
				body.runtimeStyle.backgroundImage = "url("+BLANK_GIF+")"; // dummy
				body.runtimeStyle.backgroundAttachment = "fixed";
			}
		}
	});
}
$.fn.extend({toFixed:function(position){
var isIE = !!window.ActiveXObject;var isIE6 = isIE && !window.XMLHttpRequest;var isIE8 = isIE && !!document.documentMode && (document.documentMode == 8);var isIE7 = isIE && !isIE6 && !isIE8;
if (isIE6 || isIE7){} else {return this;}
return this.each(function(){
	var t = $(this);
	var id = t.get(0).id || 'fixed_'+parseInt(Math.rand()*10000);
	var rect = {w:t.width(),h:t.height(),l:t.css('left'),r:t.css('right'),'t':t.css('top'),b:t.css('bottom')};
	 if (rect.l != 'auto'){rectl = parseInt(rect.l);}else{rectl = 0;}
	if (rect.r != 'auto'){rectr = parseInt(rect.r);}else{rectr = 0;}
	if (rect.t != 'auto'){rectt = parseInt(rect.t);}else{rectt = 0;}
	if (rect.b != 'auto'){rectb = parseInt(rect.b);}else{rectb = 0;}

	var _pos = {left:rect.l,right:rect.r,top:rect.t,bottom:rect.b};
	_pos = $.extend(_pos,position);	
	var css = t.attr('style')+';';
	css  += 'position:absolute;bottom:auto;right:auto;clear:both;';
	 if(rect.l != 'auto' && rect.r != 'auto')
	 	css += 'width:expression(eval(document.compatMode && document.compatMode==\'CSS1Compat\') ? documentElement.clientWidth  - '+ rectl +' - ' + rectr +' : document.body.clientWidth  - '+ rectl +' - ' + rectr +' );';
	 if(rect.l == 'auto' && rect.r != 'auto')
	 	css += 'left:expression(eval(document.compatMode && document.compatMode==\'CSS1Compat\') ? documentElement.scrollLeft + (documentElement.clientWidth-this.clientWidth - ' + rectr + ') : document.body.scrollLeft +(document.body.clientWidth-this.clientWidth - ' + rectr + '));';
	 else
	 	css += 'left:expression(eval(document.compatMode && document.compatMode==\'CSS1Compat\') ? documentElement.scrollLeft + ' + rectl + ' : document.body.scrollLeft + ' + rectl + ');';
	 if(rect.t == 'auto' && rect.b != 'auto')
	 	css += 'top:expression(eval(document.compatMode && document.compatMode==\'CSS1Compat\') ? documentElement.scrollTop + (documentElement.clientHeight-this.clientHeight - ' + rectb + ') : document.body.scrollTop +(document.body.clientHeight-this.clientHeight - ' + rectb + '));';
	 else
	 	css += 'top:expression(eval(document.compatMode && document.compatMode==\'CSS1Compat\') ? documentElement.scrollTop + ' + rectt + ' : document.body.scrollTop + ' + rectt + ');';
	 t.attr('style',css);
});

}});
})(jQuery);




使用方法:

在你的html页面引入jquery库和ie6fixed.js插件,就是上面这段代码

<script src="/static/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="/static/ywt/ie6fixed.js"></script>




然后你要实现position:fixed的元素

<div id="aaaa" style="position:fixed;right:22px;bottom:10px;background-color:#f00;width: 100px;height:100px;">测试</div>



然后加上一段jquery就可以了
<script type="text/javascript">$('#aaaa').toFixed();</script>




你可能感兴趣的:(jquery实现IE6支持position:fixed)