Question

我有一个绝对定位的“左菜单”和“右菜单”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中的结果更具可预测性？

Answer 1

我猜你的情况可能有问题。如果滚动返回到0时滚动处理程序触发，则每个条件将返回false，因为0转换为false。我想到的最简单的修复是在最后添加另一个将恢复绝对位置的其他：

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

}

Answer 2

IE8及之前不支持

pageYOffset和pageXOffset。你应该开始使用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.
}

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

2 个答案: