PageYOffset Прокрутка и анимация в IE8
Я работаю над прокруткой дизайна страницы, и у меня есть следующий Javascript, чтобы скрыть и показать диалоговое окно:
if(window.pageYOffset >= 300){
$('#m1').fadeIn('slow');
}
if(document.documentElement.scrollTop >=300){
$('#m1').fadeIn('slow');
}
Это отлично работает в Chrome, FF, IE9 +
Однако в IE8,7 это всего лишь работа. Он показывает и скрывает элемент правильно, но задержка между ним, когда он оценивает положение прокрутки и когда он скрывает элемент, является ужасающим. Кроме того, нет никакого исчезновения, это просто происходит.
Мне интересно, просто ли это проблема с IE8, с которой мне нужно иметь дело, или если у меня есть способ достичь реактивного, чистого исчезновения с IE8.
Ответы
Ответ 1
pageYOffset
и pageXOffset
не поддерживаются в IE8 и ранее, попробуйте эту функцию:
// 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
};
}
Ответ 2
Вы также можете исправить это, используя следующее:
document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset;
Итак, у вас есть
if((document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset) >= 300){
$('#m1').fadeIn('slow');
}
Таким образом вы можете избежать репликации кода.