IE6에서 fixed 실효 해결 방법

5216 단어 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]-->

이번에는 타당하다.

좋은 웹페이지 즐겨찾기