如何向下滾動時更改背景顏色並重復該過程？

Question

我有用於在用戶向下滾動頁面時更改背景顏色的代碼。

演示：http://jsfiddle.net/Phb4B/前兩個div's.How

背景顏色變化做我調用的函數，在第三格的背景顏色變爲開始顏色，以便再次運行？

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

Answer 2

這裏是你可能想什麼。 JsFiddle Link

我剛換了一行。

var animation_end_pos = blocks + blocks; 

到

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

動畫應該在最後一個塊結束，而不是第二塊，所以我計算出的總高度（和上高度的所有塊。而且這裏的假設是所有塊的高度將是相同。）

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

而且爲了更好的效果，我已經設置體的背景色爲色彩開始在頁面加載時。

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

Answer 3

我剛換了一行。

var animation_end_pos = blocks + blocks; 

到

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

動畫應該在最後一個塊結束，而不是第二塊，所以我計算出的總高度（和上高度的所有塊。而且這裏的假設是所有塊的高度將是相同）

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