滚动淡入淡出在 Firefox 上不起作用答案

【问题标题】：Scrolling fade doesn't work on firefox滚动淡入淡出在 Firefox 上不起作用
【发布时间】：2015-12-13 05:54:50
【问题描述】：

我遇到了淡出问题。它似乎适用于chrome，但不适用于firefox。有人可以帮助我吗？非常感谢！

var scrollPos;
$(window).scroll(function() {
    var scrollPos = document.body.scrollTop;

    if (scrollPos < 10) {
            $('#cc-m-12786466225').fadeTo(100,1);
    } else {
            $('#cc-m-12786466225').fadeTo(100,0);
    }
});

这是代码 (https://jsfiddle.net/tbwst60o/3/embedded/result/)

【问题讨论】：

你说不行。但是会发生什么？
这不是问题，但您已经在全局范围内声明了 scrollPos，然后在函数内部再次声明。如果您希望该值是全局的，请从您在函数中设置 scrollPos 的位置删除 var
我想淡出的图像固定在主页登陆页面的窗口中心。当我向下滚动时，它必须淡出。我试图删除 var 但它仍然无法正常工作并且图像不会在火狐上淡出。 chrome上没问题，firefox有问题。我刚刚也尝试了 .fadein .fadeout/ animate 。
$(window).scrollTop();

标签： javascript css animation fadein fadeout

【解决方案1】：

不同的浏览器以不同的方式获取该变量。

这是来自this answer 的函数应用于您的代码。

https://jsfiddle.net/tbwst60o/2/

$(window).scroll(function() {
    if (getScrollTop() < 10) {
            $('#cc-m-12786466225').fadeTo(100,1);
    } else {
            $('#cc-m-12786466225').fadeTo(100,0);
    }
});

function getScrollTop(){
    if(typeof pageYOffset!= 'undefined'){
        //most browsers except IE before #9
        return pageYOffset;
    }
    else{
        var B= document.body; //IE 'quirks'
        var D= document.documentElement; //IE with doctype
        D= (D.clientHeight)? D: B;
        return D.scrollTop;
    }
}

虽然... jQuery 已经内置了这个。

$(window).scroll(function() {
    if ($(window).scrollTop() < 10) {
            $('#cc-m-12786466225').fadeTo(100,1);
    } else {
            $('#cc-m-12786466225').fadeTo(100,0);
    }
});

【讨论】：

有些东西现在改变了，图像开始闪烁但没有淡出