pageYOffset Desplazamiento y Animación en IE8

Question

estoy trabajando en un diseño de página de desplazamiento y tengo los siguientes 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

pageYOffset y pageXOffset no se admiten en Internet Explorer 8 y antes, probar 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 
    }; 
} 

Answer 2

También puede fijarla con esto:

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

Así lo tienes

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

De esta manera puede evitar la duplicación de código.