pageYOffset Scrolling and Animation in IE8

Question

I am working on a scrolling page design and I have the following Javascript to hide and show a dialog box:

        if(window.pageYOffset >= 300){

            $('#m1').fadeIn('slow');

    }

    if(document.documentElement.scrollTop >=300){

        $('#m1').fadeIn('slow');

    }

This works great in Chrome,FF, IE9+

However, in IE8,7 it only kind of works. It shows and hides the element properly but the delay between when it evaluates the scroll position and when it hides the element is horrendous. Also, there is no fade, it just happens.

I am wondering if its just a problem with IE8 that I need to deal with or if there is a way for me to achieve a reactive, clean fade with IE8.

Answer 1

pageYOffset and pageXOffset are not supported in IE8 and before, try this function:

// Return the current scrollbar offsets as the x and y properties of an object
function getScrollOffsets() {

    // This works for all browsers except IE versions 8 and before
    if ( window.pageXOffset != null ) 
       return {
           x: window.pageXOffset, 
           y: window.pageYOffset
       };

    // For browsers in Standards mode
    var doc = window.document;
    if ( document.compatMode === "CSS1Compat" ) {
        return {
            x: doc.documentElement.scrollLeft, 
            y: doc.documentElement.scrollTop
        };
    }

    // For browsers in Quirks mode
    return { 
        x: doc.body.scrollLeft, 
        y: doc.body.scrollTop 
    }; 
}

Answer 2

You can also fix it using this:

document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset;

So you have it

if((document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset) >= 300){
        $('#m1').fadeIn('slow');
}

In this way you can avoid replicate code.