总结--IE6，IE7，IE8，火狐都支持：js/css 底部固定, 底部固定漂浮导航效果

本文链接：https://blog.csdn.net/liuyang0515/article/details/6643000

本文总结了三种实现底部固定导航的方法，适用于IE6、IE7、IE8和火狐等浏览器。包括使用JS根据浏览器类型判断定位、CSS针对IE6的特殊样式以及复杂的JS定位函数。在实际项目中，尽管第三种方法看似最复杂，但在IE6中表现最佳。

摘要由CSDN通过智能技术生成

在做项目的过程中遇到一个这样的问题，控制层在底部固定，最初用Position：fixed 是可以，但IE6不支持，最后在论坛上发了贴，得到了如下三种方法：

第一：net_lover 的回答，他是用JS来实现的，通过判断不同的浏览器

第二：cewin9999 的回答，他是通过CSS来实现的

.float_con{ background:url(../images/footer_bg.gif) repeat-x; height:28px; text-align:center; color:#fff; font:bold 12px/28px Tahoma, Geneva, sans-serif; bottom:0px; position:fixed; width:500px; background-color:#fff;color:#000;}

* html .float_con /* IE6 底部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
</style>

<div class="float_con" id="float_con">adddddddddddddddddddddsd</div>

第三：同事帮忙在网上找的代码，也是通过JS来实现的

/*
*target 要固定的元素对象，也可以是元素的id
*pos:object/string 指定固定到的位置，类型为object时，使用json方式如{right:200,bottom:50} ，为string时可选参数如下：
*cc,正中间,lc 左边,rc 右边
*lt 左上角,ct 上边,rt 右上角
*lb 左下角,cb 底部,rb 右下角
*/
var fixPosition = function(target, pos) {
    this.target = this.g(target);
    this.pos = pos;
    this.init(); //
};

fixPosition.prototype = {
    isFixed: !window.ActiveXObject || (navigator.userAgent.indexOf("MSIE 6") == -1 && document.compatMode == "CSS1Compat"),
    ae: function(e, call) {
        if (window.addEventListener) window.addEventListener(e, call, false);
        else window.attachEvent("on" + e, call);
    },
    g: function(id) { return typeof (id) == "string" ? document.getElementById(id) : id; },
    setPos: function() {//设置位置
        var de = document.compatMode == "CSS1Compat" ? document.documentElement : document.body;
        if (typeof (this.pos) == "string") {//
            if (this.isFixed) {

                switch (this.pos.charAt(0)) {
                    case "l":
                        this.target.style.left = "0px";
                        break;
                    case "r":
                        this.target.style.right = "0px";
                        break;
                    default:
                        this.target.style.left = (de.clientWidth - this.target.clientWidth) / 2 + "px";
                        break;
                }
                switch (this.pos.charAt(1)) {
                    case "t":
                        this.target.style.top = "0px";
                        break;
                    case "b":
                        this.target.style.bottom = "0px";
                        break;
                    default:
                        this.target.style.top = (de.clientHeight - this.target.clientHeight) / 2 + "px";
                        break;
                }
            } else {
                switch (this.pos.charAt(0)) {
                    case "l":
                        this.target.style.left = de.scrollLeft + "px";
                        break;
                    case "r":
                        this.target.style.left = de.scrollLeft + de.clientWidth - this.target.clientWidth + "px";
                        break;
                    default:
                        this.target.style.left = de.scrollLeft + ((de.clientWidth - this.target.clientWidth) / 2) + "px";
                        break;
                }
                switch (this.pos.charAt(1)) {
                    case "t":
                        this.target.style.top = de.scrollTop + "px";
                        break;
                    case "b":
                        this.target.style.top = de.scrollTop + de.clientHeight - this.target.clientHeight + "px";
                        break;
                    default:
                        this.target.style.top = de.scrollTop + ((de.clientHeight - this.target.clientHeight) / 2) + "px";
                        break;
                }
            }
        } else {
            if (this.isFixed) {
                for (var p in this.pos)
                    this.target.style[p] = this.pos[p] + "px";
            } else {
                for (var p in this.pos) {
                    switch (p.toLowerCase()) {
                        case "left":
                            this.target.style.left = de.scrollLeft + this.pos[p] + "px";
                            break;
                        case "right":
                            this.target.style.left = de.scrollLeft + de.clientWidth - this.target.clientWidth - this.pos[p] + "px";
                            break;
                        case "top":
                            this.target.style.top = de.scrollTop + this.pos[p] + "px";
                            break;
                        case "bottom":
                            this.target.style.top = de.scrollTop + de.clientHeight - this.target.clientHeight - this.pos[p] + "px";
                            break;
                    }
                }
            }
        }
    },
    init: function() {
        if (!this.pos)
            throw Error("Invalid arguments [pos].");

        this.target.style.position = this.isFixed ? "fixed" : "absolute";
        var timer, o = this;
        this.ae("resize", function() {//支持fixed的浏览器窗体大小改变时也重置位置，防止中间无法居中
            clearTimeout(timer);
            timer = setTimeout(function() { o.setPos(); }, 30);
        });
        if (!this.isFixed) {//滚动
            this.ae("scroll", function() {
                //clearTimeout(timer);
                //timer=setTimeout(function() { o.setPos(); },30);
                o.setPos();
            });
        }
        this.setPos();
    },
    clearPos: function() {
        this.target.style.left = "";
        this.target.style.top = "";
        this.target.style.right = "";
        this.target.style.bottom = "";
    }
}