div - scroll down jquery

pageYOffset Scrolling y animación en IE8

Question

Estoy trabajando en un diseño de página de desplazamiento y tengo el siguiente código JavaScript para ocultar y mostrar un cuadro de diálogo:

        if(window.pageYOffset >= 300){

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

    }

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

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

    }

Esto funciona muy bien en Chrome, FF, IE9 +

Sin embargo, en IE8,7 solo funciona. Muestra y oculta el elemento correctamente, pero la demora entre cuando evalúa la posición de desplazamiento y cuando oculta el elemento es terrible. Además, no hay desvanecimiento, simplemente sucede.

Me pregunto si es solo un problema con IE8 con el que tengo que lidiar o si hay una forma de que logre un fade limpio y reactivo con IE8.

Answer 1

También puedes arreglarlo usando esto:

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

Entonces lo tienes

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

De esta forma, puedes evitar duplicar el código.

Answer 2

pageYOffset y pageXOffset no son compatibles con IE8 y anteriores, pruebe esta función:

// 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 
    }; 
}