javascript - 向下滚动并重复该过程时如何更改背景颜色？

Question

我有当用户向下滚动页面时更改背景颜色的代码。

演示:http://jsfiddle.net/Phb4B/

前两个 div 的背景颜色发生变化。如何调用该函数再次运行，以便在第三个 div 上背景颜色变为开始颜色？

    function call(){
        $(document).scroll(function() {
        scroll_pos = $(this).scrollTop(); 
        if(scroll_pos >= animation_begin_pos && scroll_pos <= animation_end_pos ) { 
            var percentScrolled = scroll_pos / ( animation_end_pos - animation_begin_pos );
            var newRed = beginning_color.red() + ( ( ending_color.red() - beginning_color.red() ) * percentScrolled );
            var newGreen = beginning_color.green() + ( ( ending_color.green() - beginning_color.green() ) * percentScrolled );
            var newBlue = beginning_color.blue() + ( ( ending_color.blue() - beginning_color.blue() ) * percentScrolled );
            var newColor = new $.Color( newRed, newGreen, newBlue );
            //console.log( newColor.red(), newColor.green(), newColor.blue() );
            $('body').animate({ backgroundColor: newColor }, 0);
        } else if ( scroll_pos > animation_end_pos ) {
             $('body').animate({ backgroundColor: ending_color }, 0);
        } else if ( scroll_pos < animation_begin_pos ) {
             $('body').animate({ backgroundColor: beginning_color }, 0);

        } else { }
    });
 }

Answer 1

看这个:http://jsfiddle.net/Khursheed_Ali/Phb4B/26/

代码:

function call(){
     var offset=0;
    $(document).scroll(function() {
    scroll_pos = $(this).scrollTop(); 
    if(scroll_pos >= animation_begin_pos && scroll_pos <= animation_end_pos ) { 
       // console.log( 'scrolling and animating' );
        //we want to calculate the relevant transitional rgb value
        var percentScrolled = (scroll_pos-offset) / ( animation_end_pos - animation_begin_pos );
        var newRed = beginning_color.red() + ( ( ending_color.red() - beginning_color.red() ) * percentScrolled );
        var newGreen = beginning_color.green() + ( ( ending_color.green() - beginning_color.green() ) * percentScrolled );
        var newBlue = beginning_color.blue() + ( ( ending_color.blue() - beginning_color.blue() ) * percentScrolled );
        var newColor = new $.Color( newRed, newGreen, newBlue );
        //console.log( newColor.red(), newColor.green(), newColor.blue() );
        $('body').animate({ backgroundColor: newColor }, 0);
    } else if ( scroll_pos > animation_end_pos ) {
         $('body').animate({ backgroundColor: ending_color }, 0);
    } else if ( scroll_pos < animation_begin_pos ) {
         $('body').animate({ backgroundColor: beginning_color }, 0);

    } else { }
     // added   
    if(scroll_pos > animation_end_pos){
        offset+=blocks *2;
        animation_begin_pos=animation_end_pos; animation_end_pos+=blocks *2;
        $('body').animate({ backgroundColor: beginning_color }, 0);


    }

     if(scroll_pos<offset){
        console.log("offset:"+offset)
        offset-=blocks *2;
        animation_end_pos-=blocks *2; animation_begin_pos-=blocks *2; 
    }      
});