解决IE6下position:fixed固定定位问题

很多时时候，我们需要让某个元素始终位于浏览器的某一个位置，不会因为浏览器窗口的缩放和滚动条的滚动而变化，那个第一个想到的肯定是用position:fixed生成固定定位，然后依靠其值定位，就能达到其需求。可是当其他浏览器都正常显示的时候，只有IE6不那么完美。一般百度的时候就会发现IE6下各种奇葩问题都有，固定定位也算是一大难题，下面介绍的是如何使用CSS Hack解决IE6浏览器下不支持position:fixed属性的办法。

  <div style="width:100%; height:5000px;">    
      <div class="fixedTop"></div>    
      <div class="fixedBottom"></div>    
      <div class="fixedLeft"></div>    
      <div class="fixedRight"></div>
  </div>

  .fixedTop,
  .fixedBottom,
  .fixedLeft,
  .fixedRight{ 
      width:100px; 
      height:100px; 
      background:#f00; 
      position:fixed;
  }
  .fixedTop{ 
      top:0; 
  }
  .fixedBottom{ 
      bottom:0; 
  }
  .fixedLeft{ 
      left:0; 
  }
  .fixedRight{
      right:0; 
  }

• 以上为常用的固定定位的方式，用position:fixed生成固定定位，设置其div的top, bottom, left 以及right属性来进行位置的定位。

文章的开头也提头，IE6下面是不支持position:fixed的，那么为了让IE6也能够实现现样的效果，那么就只能通过position:absolute来模拟其效果

  .fixedTop,
  .fixedBottom,
  .fixedLeft,
  .fixedRight{ 
      width:100px; 
      height:100px; 
      background:#f00; 
      position:fixed; 
      _position:absolute;
  }
  /*固定到头部*/
  .fixedTop{ 
      top:0; 
      _top:expression(documentElement.scrollTop);
  } 
  /*固定到底部,'-30'可以修改其值*/
  .fixedBottom{ 
      bottom:0; 
      _top:expression(documentElement.scrollTop+documentElement.clientHeight-this.clientHeight-30);
  } 
  /*固定到左边*/
  .fixedLeft{ 
      left:0; 
      _left:expression(documentElement.scrollLeft);
  } 
  /*固定到右边*/
  .fixedRight{
      right:0; 
      _left:expression(documentElement.scrollLeft+documentElement.clientWidth-this.clientWidth);
  } 

• 这样就能够实现IE6下固定定位的问题了，如果你想要其定位的位置，可以修改其中的数值控制元素的位置。

现在，问题还没有完全解决。在用了上面的办法后，你会发现：被固定定位的元素在滚动滚动条的时候会闪动。解决闪动问题的办法是在 CSS 文件中加入：

  /*----防止抖动---*/
  body{    
      _background-image:url(about:blank);  /* for IE6 */   
      _background-attachment:fixed;  /*必须*/
}

到此，IE6 的 position:fixed; 问题已经被解决了。

PS：如果有童鞋觉得这样子写不是很好的话，可以用JS来解决此问题。

  $(function(){    
      function reCal(){        
          var screenHelpwidth, 
              screenHelpheight, 
              myHelptop, 
              getPosHelpLeft, 
              getPosHelpTop;        
          screenHelpwidth = $(window).width();        
          screenHelpheight = $(window).height();        
          myHelptop = $(document).scrollTop();  //获取滚动条距顶部的偏移        
          //计算弹出层的left        
          getPosHelpLeft = screenHelpwidth / 2 - 320;        
          //计算弹出层的top        
          getPosHelpTop = screenHelpheight / 2 - 225;        
          //css定位弹出层        
          $("#boxcenter").css({"left": getPosHelpLeft, "top": getPosHelpTop + myHelptop});    
      }    
      reCal();    
      //当浏览器窗口大小改变时...    
      $(window).on('resize scroll',reCal);
  });