使用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。 我想到的最簡單的解決方法是在末尾添加另一個，以恢復絕對位置：

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

pageYOffset及pageXOffset不支持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.
}