javascript - 使用 css/javascript 平滑滚动固定 div 在 IE 中给出看似随机的结果

Question

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

这是我的代码:

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 中的结果更可预测？

Answer 1

我想这可能是您的条件有问题。如果滚动返回到 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";

}