热门关键字：
jquery > jquery教程 > 插件详解 > Jquery完美解决IE6解决Fixed兼容插件

Jquery完美解决IE6解决Fixed兼容插件

7176
作者：管理员
发布时间：2012/7/24 19:17:20
评论数：3
转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=20
 
编写者：网友Fly Mirage
 
主要作用：
 
使不支持position:fixed的浏览器支持此属性
 
适用环境：
 
IE 6 、IE 7、IE 8 not in standards mode（兼容模式），在其他浏览器默认不会启用，也不会占用资源
 
无任何闪烁，无任何滑动动画，效果和Chrome、Firefox一样，无任何拖影。
 
并非监听onscroll、onresize事件，也不是采用setTimeout。使用IE中特有的CSS expression()。
 
支持：
 
常用： left:1px;top:1px;、 left:1px;bottom:1px;、 right:1px;bottom:1px; 、top:1px;right:1px;
 
这些方式理论上需要指定width和height，当然您不写宽高，系统可以自动判断，但是容易出现不可预料的结果（并非代码问题，其它浏览器也会）
 
代码如下：
  1. /**  
  2.  * position:fixed  
  3.  *   
  4.  * @Author:Fly Mirage  
  5.  * @Date:2012-01-17  
  6.  * @Version:1.1  
  7.  *  
  8.  * @History:  
  9.  * ----------------------------------------------  
  10.  * v1.0     2012-01-17  
  11.  * # Create it  
  12.  *   
  13.  */  
  14. (function($) {   
  15.     var isIE = !!window.ActiveXObject;   
  16.     var isIE6 = isIE && !window.XMLHttpRequest;   
  17.     var isIE8 = isIE && !!document.documentMode && (document.documentMode == 8);   
  18.     var isIE7 = isIE && !isIE6 && !isIE8;   
  19.     if (isIE6 || isIE7) {   
  20.         $().ready(function() {   
  21.             var body = document.body;   
  22.             var BLANK_GIF;   
  23.             if (body.currentStyle.backgroundAttachment != "fixed") {   
  24.                 if (body.currentStyle.backgroundImage == "none") {   
  25.                     body.runtimeStyle.backgroundImage = "url(" + BLANK_GIF + ")";   
  26.                     body.runtimeStyle.backgroundAttachment = "fixed";   
  27.                 }   
  28.             }   
  29.         });   
  30.     }   
  31.     $.fn.extend({   
  32.         toFixed: function(position) {   
  33.             var isIE = !!window.ActiveXObject;   
  34.             var isIE6 = isIE && !window.XMLHttpRequest;   
  35.             var isIE8 = isIE && !!document.documentMode && (document.documentMode == 8);   
  36.             var isIE7 = isIE && !isIE6 && !isIE8;   
  37.             if (isIE6 || isIE7) {} else {   
  38.                 return this;   
  39.             }   
  40.             return this.each(function() {   
  41.                 var t = $(this);   
  42.                 var id = t.get(0).id || 'fixed_' + parseInt(Math.rand() * 10000);   
  43.                 var rect = {   
  44.                     w: t.width(),   
  45.                     h: t.height(),   
  46.                     l: t.css('left'),   
  47.                     r: t.css('right'),   
  48.                     't': t.css('top'),   
  49.                     b: t.css('bottom')   
  50.                 };   
  51.                 if (rect.l != 'auto') rect.l = parseInt(rect.l);   
  52.                 if (rect.r != 'auto') rect.r = parseInt(rect.r);   
  53.                 if (rect.t != 'auto') rect.t = parseInt(rect.t);   
  54.                 if (rect.b != 'auto') rect.b = parseInt(rect.b);   
  55.                 var _pos = {   
  56.                     left: rect.l,   
  57.                     right: rect.r,   
  58.                     top: rect.t,   
  59.                     bottom: rect.b   
  60.                 };   
  61.                 _pos = $.extend(_pos, position);   
  62.                 var css = '<style type="text/css">.' + id + '-fixed {position:absolute;bottom:auto;right:auto;clear:both;';   
  63.                 if (rect.l != 'auto' && rect.r != 'auto')   
  64.                  css += 'width:expression(eval(document.compatMode && document.compatMode==\'CSS1Compat\') ? documentElement.clientWidth  - ' + rect.l + ' - ' + rect.r + ' : document.body.clientWidth  - ' + rect.l + ' - ' + rect.r + ' );';   
  65.                 if (rect.l == 'auto' && rect.r != 'auto')   
  66.                  css += 'left:expression(eval(document.compatMode && document.compatMode==\'CSS1Compat\') ? documentElement.scrollLeft + (documentElement.clientWidth-this.clientWidth - ' + rect.r + ') : document.body.scrollLeft +(document.body.clientWidth-this.clientWidth - ' + rect.r + '));';   
  67.                 else  
  68.                  css += 'left:expression(eval(document.compatMode && document.compatMode==\'CSS1Compat\') ? documentElement.scrollLeft + ' + rect.l + ' : document.body.scrollLeft + ' + rect.l + ');';   
  69.                 if (rect.t == 'auto' && rect.b != 'auto')   
  70.                  css += 'top:expression(eval(document.compatMode && document.compatMode==\'CSS1Compat\') ? documentElement.scrollTop + (documentElement.clientHeight-this.clientHeight - ' + rect.b + ') : document.body.scrollTop +(document.body.clientHeight-this.clientHeight - ' + rect.b + '));';   
  71.                 else  
  72.                  css += 'top:expression(eval(document.compatMode && document.compatMode==\'CSS1Compat\') ? documentElement.scrollTop + ' + rect.t + ' : document.body.scrollTop + ' + rect.t + ');';   
  73.                 css += '}</style>';   
  74.                 $(css).appendTo('head');   
  75.                 t.addClass(id + '-fixed');   
  76.             });   
  77.         }   
  78.     });   
  79. })(jQuery);  
 

打包下载





如果您觉得本文的内容对您的学习有所帮助：支付鼓励



关键字：Jquery完美解决IE6解决Fixed兼容插件
友荐云推荐