javascript - 滚动元素上的渐变在Safari中突然消失

Question

我正在使用一个名为ParallaxFade的Javascript函数并对其进行了更改，因此该元素不会完全淡化为opacity: 0。在Chrome中可以正常工作，但是当我在Safari中向上滚动（超出默认位置，在顶部触发橡皮筋）时，该元素完全消失。

我尝试将代码重置为淡化1-(scrollPos/100)而不是分数0.01+(75/scrollPos)的线性方式，并且在两种浏览器中都可以正常工作。

function parallaxFade() {
    var scrollPos = $(this).scrollTop();
    $('#element').css({
        'background-position' : '50% ' + (-scrollPos/1)+"px"
    });
    $('#element').css({
        'margin-top': (scrollPos/2)+"px",
        'opacity': 0.01+(75/scrollPos)
    }); 
}

$(document).ready(function(){
    $(window).scroll(function() {
        parallaxFade();
    });
});

我真的不想恢复为将元素一直淡入opacity: 0的默认线性方式。有什么我可以忽略的简单事情吗？这是我从头开始构建的第一个网站（不使用CMS），所以请原谅我的无知。

Answer 1

我突然想到，问题可能出在scrollPos变为0时。快速的if语句测试scrollPos > 0修复了该问题。不再出现故障淡入淡出/滚动：

function parallaxFade() {
    var scrollPos = $(this).scrollTop();
    if (scrollPos > 0) {
        $('#element').css({
        'background-position' : '50% ' + (-scrollPos/1)+"px"
    });
    $('#element').css({
        'margin-top': (scrollPos/2)+"px",
        'opacity': 0.01+(75/scrollPos)
    }); 
}