Javascript 当向下滚动并重复此过程时，如何更改背景颜色？

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

演示：

前两个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 { }
    });
 }

函数调用（）{
$（文档）。滚动（函数（）{
scroll_pos=$（this）.scrollTop（）；
如果（滚动\u位置>=动画\u开始\u位置和滚动\u位置动画\u结束\u位置）{
$（'body'）.animate（{backgroundColor:ending_color}，0）；
}else if（滚动位置<动画开始位置）{
$（'body'）.animate（{backgroundColor:start_color}，0）；
}else{}
});
}

请参见：/

代码：

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

函数调用（）{
var偏移=0；
$（文档）。滚动（函数（）{
scroll_pos=$（this）.scrollTop（）；
如果（滚动\u位置>=动画\u开始\u位置和滚动\u位置动画\u结束\u位置）{
$（'body'）.animate（{backgroundColor:ending_color}，0）；
}else if（滚动位置<动画开始位置）{
$（'body'）.animate（{backgroundColor:start_color}，0）；
}else{}
//增加
如果（滚动位置>动画位置）{
偏移量+=块*2；
动画开始位置=动画结束位置；动画结束位置+=块*2；
$（'body'）.animate（{backgroundColor:start_color}，0）；
}
如果（滚动）_pos这里是您可能想要的

我刚换了一行

    var animation_end_pos = blocks + blocks;

var animation_end_pos = blocks + blocks;

到

动画应该在最后一个块结束，而不是第二个块，所以我计算了总高度（所有块的高度之和。这里假设所有块的高度都是相同的。）

为了获得更好的效果，我在页面加载时将主体的背景色设置为起始色

    $("body").css("background-color", beginning_color);

我刚换了一行

    var animation_end_pos = blocks + blocks;

var animation_end_pos = blocks + blocks;

到

动画应该在最后一个块结束，而不是第二个块，所以我计算了总高度（所有块的高度之和。这里假设所有块的高度都是相同的。）

var animation_end_pos = blocks * $('.block').length;

var blocks = $(".block").height();
...
var animation_end_pos = blocks * $('.block').