jQuery淡入/淡出滚动公式

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 );
    });
});