zoukankan      html  css  js  c++  java
  • javascript实现ie6兼容position:fixed

    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";       
          });          
      });
     }
    }

  • 相关阅读:
    SQL学习日志
    程序员之路──如何学习C语言并精通C语言
    using用法
    c#中的接口与类的区别
    用c#来实现一种行列式的计算优化
    python 切换目录
    如何光盘自动运行html?
    nsis 安装脚本示例(转)
    python sys.path.append
    python 面向对象初认识
  • 原文地址:https://www.cnblogs.com/oceanxing/p/2758644.html
Copyright © 2011-2022 走看看