兼容主流浏览器包括ie6固定浮动层的解决方案

13-10-15 09:59

现在都流行吧导航栏固定在页面的顶部或者底部，这是一个很不错的用户体验。今天拿几个方法和大家分享。

浮动层固定兼容IE6 position:fixed的最佳解决方案

第一种：css方法

要把一个元素固定在页面的某个位置,并不受滚动条影响一般使用的方法都是"position:fixed;"来实现，但是万恶的IE6不支持fixed这个属性。所以我们今天用其他方法来实现能兼容IE6的页面底部固定成的css代码。如下
.bottom{height:23px;line-height:23px;position:fixed;bottom:0;width:100%;_position:absolute;_bottom:auto;_width:100%;z-index:999;
    //_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
    _top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
    /* for IE6 ，执行JS语句，documentElement即html对象，clientHeight即可视窗口高度，
    offsetHeight即浮动层高度（包括border边框厚度），scrollTop即滚动条滚动过的页面高度 */


需要注意的是：使用以上代码后在ie中你会发现被固定定位的元素在滚动滚动条的时候会闪动，下面给出解决方法：

    //body{background:url(notfound)fixed;}
    body{
    background-image:url(text.txt); /*for IE6，也可以用一张图片URL，是否存在这文件无所谓*/
    background-attachment:fixed;   /* 这句是关键之一：一定要fixed,不能用scroll */


第二种：css方法

    body{margin:0;}
    #test{display:block; bottom:3px; right:3px; width:130px; position:fixed;}
    /* 以下是写给IE6的 */
    * html body{height:100%; overflow-y:auto;}
    * html #test{position:absolute; right:18px;}
    * html{overflow-x:auto; overflow-y:hidden;}


原理：
1、position定位，如果前面的父元素都没有position的话，那么该position定位元素是相对于html的，
注意！是相对html，而不是body
2、html滚动条隐藏，使用body滚动条overflow:auto模拟html滚动条。
3、body层高度100%，当html不设置height高度的时候，除了IE6外，body处的百分比高度是无效的（这算是利用了IE6的bug吧！）


第三种：jQuery方法

    var otop = $("#sub_nav").offset().top;
             $(window).scroll(function(){
                    var scroll_top = parseInt($(window).scrollTop());
                    if( scroll_top > otop ){
                            if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {
                                    $("#sub_nav").css({position:"absolute", top:$(window).scrollTop()+"px"});
                            }else{
                                    $("#sub_nav").css({position:"fixed", top:"0px"});
                            }
                    }else{
                            $("#sub_nav").css({position:"static", top:""});
                    }
             });


上面的sub_nav是一个层，随着页面向下滚动，当此水平条接触浏览器的上边缘时，水平条独立出来，不跟随滚动条滚动了




第四种：js函数

    <div .="float" id="float"> 我是个腼腆羞涩的浮动层… </div>

    var $smartFloat = function(elements) {
    var position = function(element) {
    var top = element.getPosition().y, pos = element.getStyle("position");
    window.addEvent("scroll", function() {
    var scrolls = this.getScroll().y;
    if (scrolls &gt; top) {
    if (window.XMLHttpRequest) {
    element.setStyles({
    position: "fixed",
    top: 0
    });
    } else {
    element.setStyles({
    top: scrolls
    });
    }
    }else {
    element.setStyles({
    position: "absolute",
    top: top
    });
    }
    });
    };
    if ($type(elements) === "array") {
    return elements.each(function(items) {
    position(items);
    });
    } else if ($type(elements) === "element") {
    position(elements);
    }
    };
    //绑定
    $smartFloat($("float"));