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