Home/ Questions/Q 8851517
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T13:10:29+00:00

I’ve got a left menu and a right menu div that is absolutely positioned.

  • 0

I’ve got a “left menu” and a “right menu” div that is absolutely positioned. I wanted them to follow the browser window while scrolling. My solution works really well in Opera, Firefox and Chrome, but the results in IE are unpredictable. Sometimes it works as intended, but sometimes the div’s doesn’t get the “position: absolute” style back.

Here is my code:

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

    }

}

What can I do to make the result in IE more predictable?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I guess that can be problem with your conditions. If scroll handler fires when scroll comes back to 0, then each condition will return false because 0 is converted to false. Easiest fix which comes to my mind is to add another else at the very end which will restore absolute position:

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

}
    • 0