jquery - IE8中的pageYOffset滚动和动画

Question

我正在设计一个滚动页面，我有以下 Javascript 来隐藏和显示一个对话框：

        if(window.pageYOffset >= 300){

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

    }

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

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

    }

这在 Chrome、FF、IE9+ 中效果很好

但是，在 IE8,7 中它只能工作。它正确地显示和隐藏元素，但是它评估滚动位置和隐藏元素之间的延迟是可怕的。此外，没有褪色，它只是发生。

我想知道这是否只是我需要处理的 IE8 问题，或者是否有办法让我使用 IE8 实现反应性、干净的淡入淡出。

Answer 1

pageYOffsetIE8及pageXOffset之前不支持，试试这个功能：

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

您也可以使用以下方法修复它：

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

所以你有它

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

通过这种方式，您可以避免重复代码。