Question

当您向下滚动页面时，我有淡入和淡出的图像。我遇到的问题是，一旦开始滚动，不透明度就会发生变化。

这是公式：

$(document).ready(function(){
    $(window).scroll(function(){
        $(".tre").css("opacity", 1 - $(window).scrollTop() / 500);
    });
});

$(document).ready(function(){
    $(window).scroll(function(){
        $(".two").css("opacity", 0 + $(window).scrollTop() / 500);
    });
});

根据我的理解，当向下滚动500像素时，一张图像淡出，而另一张图像在此时淡入。

我想要做的只是稍后在滚动中启动不透明度更改。如何以500像素向下开始不透明度变化，然后从像素500-1000开始更改。

由于

修改

现在还不确定它是否可以使用此代码，可能需要完全不同的东西。

Answer 1

要查找滚动已在范围内移动的分数，您可以使用如下函数：

function fraction_that_scroll_has_moved_through_range( start, end )
{
    if( start < 0 || end <= start )
        return 0;

    var range = end - start;
    var current_pos = $(window).scrollTop() - start;
    var fraction = current_pos / range;

    if( fraction < 0 )
        fraction = 0;
    else if( fraction > 1 )
        fraction = 1;

    return fraction;
}

然后在你的例子中调用它：

$(document).ready(function(){
    $(window).scroll(function(){
        var f = fraction_that_scroll_has_moved_through_range( 500, 1000 );
        $(".tre").css("opacity", 1 - f );
    });
});

Jquery淡入/淡出滚动公式

1 个答案: