動態頁面上的背景顏色變化

Question

我正在構建一個webstore，通過按下「顯示更多」按鈕，顯示的產品數量在不斷變化。在向下滾動時背景顏色應該多次改變，我找到了this文章，它可以解決這個問題，但它具有固定的頁面高度。有沒有可能改變這一點？

Answer 1

如果您不知道正手的頁面大小（例如因爲動態負載），您可以使用參數來控制適配率並根據您的需要進行設置。

cStart = [250, 195, 56] // Gold 
    , cEnd = [179, 217, 112] // Lime 
    , cDiff = [cEnd[0] - cStart[0], cEnd[1] - cStart[1], cEnd[1] - cStart[0]]; 

$(document).ready(function(){ 
    $(document).scroll(function() { 
     var speed = 0.0005; 
     var p = $(this).scrollTop()* speed; 
     p = Math.min(1, Math.max(0, p)); // Clamp to [0, 1] 
     var cBg = [Math.round(cStart[0] + cDiff[0] * p), Math.round(cStart[1] + cDiff[1] * p), Math.round(cStart[2] + cDiff[2] * p)]; 
     $("body").css('background-color', 'rgb(' + cBg.join(',') +')'); 
    }); 
});