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 に変換されるfalseため、戻ります。0私の頭に浮かぶ最も簡単な修正は、絶対位置を復元する別の 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

pageYOffsetpageXOffsetIE8 以前ではサポートされていません。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 に答える