jQuery淡入/淡出滚动公式

Question

I have images that fade in and out as you scroll down on the page. The issue I am having is that the opacity is changing as soon as you begin to scroll.

Here is the formula:

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

As I understand it, one image fades out when scrolled down 500 pixels and the other fades in at that point.

What I want to do is just start the opacity change later in the scroll. How do I start the opacity change at 500 pixels down, and then the change would occur from pixels 500-1000.

Thanks

EDIT

Not sure it'll even work with this code now, might need something completely different.

Answer 1

To find the fraction that scroll has moved through a range you could use a function like this:

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

and then in your example call it like so:

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