当前位置: 代码迷 >> 综合 >> javascript实现ie6兼容position:fixed
  详细解决方案

javascript实现ie6兼容position:fixed

热度:76   发布时间:2023-12-09 01:39:43.0

positon:fixed 让HTML元素脱离文档流固定在浏览器的某个位置

网页中经常会有浮动的导航条会用到这种定位模式,但是ie6下并不兼容这种定位

浮动导航条的样式,重要的是position:fixed;bottom:60px;(浮动导航底部距离窗口底部60px)

.floating_9677{position:fixed; z-index:961; bottom:60px;}

ie6下positon:fixed不起作用,只能靠js来实现了,首先在ie6下需要将position设置为absolute

position:fixed;bottom:60px;_position:abosulte;

给浮动元素加一个属性标识,js通过这个属性能找到这些浮动元素。tag="floatNavigator"

工作中浮动导航条主要通过top或者bottom来定位。

//ie6兼容position:fixed
function fixedPositionCompatibility(){
 //判断是否ie6浏览器

 if( $.browser.msie ||  parseInt($.browser.version,10) <= 6){
     var vavigators = ("[tag=floatNavigator]");if(!navigators.length)return;// .each(navigators, function(){
       this.top = (this).css("top");this.bottom= (this).css("bottom");
       this.isTop = this.top == "auto" ? false : true;
  });
  window.attachEvent("onscroll", function(){

      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      .each(navigators, function(){           this.style.top = this.isTop ? scrollTop + parseInt(this.top) + "px" : scrollTop +(window).height() - $(this).outerHeight() - parseInt(this.bottom) + "px";       
      });          
  });
 }
}

  相关解决方案