0

我有一个绝对定位的“左菜单”和一个“右菜单”div。我希望他们在滚动时跟随浏览器窗口。我的解决方案在 Opera、Firefox 和 Chrome 中运行良好，但在 IE 中的结果是不可预测的。有时它会按预期工作，但有时 div 不会恢复“位置：绝对”样式。

这是我的代码：

if(window.pageYOffset) {

    if(window.pageYOffset > 142) {

        document.getElementById("menuRight").style.position = "fixed";
        document.getElementById("menuRight").style.top = "0";
        document.getElementById("menuRight").style.marginTop = "10px";

        document.getElementById("menuLeft").style.position = "fixed";
        document.getElementById("menuLeft").style.top = "0";
        document.getElementById("menuLeft").style.marginTop = "10px";

    } else {

        document.getElementById("menuRight").style.position = "absolute";
        document.getElementById("menuRight").style.top = "152px";
        document.getElementById("menuRight").style.marginTop = "0px";

        document.getElementById("menuLeft").style.position = "absolute";
        document.getElementById("menuLeft").style.top = "152px";
        document.getElementById("menuLeft").style.marginTop = "0px";

    }

} else if(document.body && document.body.scrollTop) {

    if(document.body.scrollTop > 142) {

        document.getElementById("menuRight").style.position = "fixed";
        document.getElementById("menuRight").style.top = "0";
        document.getElementById("menuRight").style.marginTop = "10px";

        document.getElementById("menuLeft").style.position = "fixed";
        document.getElementById("menuLeft").style.top = "0";
        document.getElementById("menuLeft").style.marginTop = "10px";

    } else {

        document.getElementById("menuRight").style.position = "absolute";
        document.getElementById("menuRight").style.top = "152px";
        document.getElementById("menuRight").style.marginTop = "0px";

        document.getElementById("menuLeft").style.position = "absolute";
        document.getElementById("menuLeft").style.top = "152px";
        document.getElementById("menuLeft").style.marginTop = "0px";

    }

} else if(document.documentElement && document.documentElement.scrollTop) {

    if(document.documentElement.scrollTop > 142) {

        document.getElementById("menuRight").style.position = "fixed";
        document.getElementById("menuRight").style.top = "0";
        document.getElementById("menuRight").style.marginTop = "10px";

        document.getElementById("menuLeft").style.position = "fixed";
        document.getElementById("menuLeft").style.top = "0";
        document.getElementById("menuLeft").style.marginTop = "10px";

    } else {

        document.getElementById("menuRight").style.position = "absolute";
        document.getElementById("menuRight").style.top = "152px";
        document.getElementById("menuRight").style.marginTop = "0px";

        document.getElementById("menuLeft").style.position = "absolute";
        document.getElementById("menuLeft").style.top = "152px";
        document.getElementById("menuLeft").style.marginTop = "0px";

    }

}

我该怎么做才能使 IE 中的结果更可预测？

4

2 回答 2

2

我想这可能是你的条件的问题。如果滚动处理程序在滚动返回 0 时触发，则每个条件都将返回false，因为0已转换为 false。我想到的最简单的解决方法是在最后添加另一个 else 来恢复绝对位置：

if(window.pageYOffset) {
    [...]
} else if(document.body && document.body.scrollTop) {
    [...]
} else if(document.documentElement && document.documentElement.scrollTop) {
    [...]
} else {

    document.getElementById("menuRight").style.position = "absolute";
    document.getElementById("menuRight").style.top = "152px";
    document.getElementById("menuRight").style.marginTop = "0px";

    document.getElementById("menuLeft").style.position = "absolute";
    document.getElementById("menuLeft").style.top = "152px";
    document.getElementById("menuLeft").style.marginTop = "0px";

}
于 2012-11-19T10:32:33.927 回答
1

pageYOffset并且pageXOffset在 IE8 及之前的版本中不受支持。你应该开始使用 jQuery，这段代码有点难看。如果您使用 jQuery，您无法确保即使 IE 也会显示相同的结果。您的代码将如下所示

var pageXOffset = $(window).scrollLeft()
var pageYOffset = $(window).scrollTop();
var menuRight = $('#menuRight');
var menuLeft = $('#menuLeft');

if(pageYOffset) {
 if(pageYOffset > 142) {
  menuRight.css({position: "fixed", top: "0", marginTop: "10px"});
  menuLeft.css({position: "fixed", top: "0", marginTop: "10px"});
 } else {
  menuRight.css({position: "absolute", top: "152px", marginTop: "0px"});
  menuLeft.css({position: "absolute", top: "152px", marginTop: "0px"});
 }
} else if(document.body && document.body.scrollTop) {
 //etc.
}
于 2012-11-19T10:33:50.477 回答