如何在div向下滾動時使背景顏色消失

我目前正在爲自己設計一個小小的頁面組合，您目前可以看到here。我想要實現的是，當您向下滾動div時，背景會從透明變爲現在的黃色。此外，當你繼續滾動時，我希望它從黃色漸變爲灰色。如何在div向下滾動時使背景顏色消失

基本上就像this website已經做到了。

我一直在搜索整個網絡，並嘗試了10多個不同的教程，閱讀無數的論壇和哭泣自己我沒有發現任何東西適合我。我可以處理html和css，但對於jquery沒有線索，所以在編寫自己的代碼時我不知道從哪裏開始。

如果有人能給我正確的方向，我將不勝感激。

謝謝。

來源

2013-07-27 Oliver Stanley

到目前爲止你一直在嘗試什麼？ –

認識到，一旦你達到某個點，該網站的背景div改變顏色。你可以做什麼來指定，如果高度> = X，背景色變色？ –

您可以jQuery UI

來源

2013-07-27 18:16:20 John

動畫試試這個

$(document).scroll(function(){ 
    t = (100 - $(this).scrollTop())/100; 
    if(t<0)t=0; 
    $('.skyB').css({opacity: t}) 
    })

FIDDLE Demo

希望它可以幫助你

來源

2013-07-27 18:39:45

這幾乎工作，但它只是開始褪色時，我滾動瀏覽器窗口。瀏覽器窗口本身不滾動，它的DIV包含滾動的溢出位置的網站內容 –

使用你的元素id'$（'div'）'而不是'$（document）'' –

這個怎麼樣，看到JSFiddle（下文解釋）：

var height_colors = [ 
    [0, "#FFF"], 
    [50, "#FFFF00"], 
    [100, "#FF0000"], 
    [150, "#FF00FF"], 
    [200, "#00FF00"], 
    [250, "#0000FF"], 
    [300, "#00FFFF"], 
    [350, "#123456"], 
    [400, "#654321"], 
    [450, "ABCDEF"], 
    [500, "FEDCBA"] 
]; 

var box = $("#lipsum"); 
box.on("scroll", function() { 
    var scrollPos = $(this).scrollTop(); 
    $.each(height_colors, function(key, value) { 
     if(scrollPos < value[0] || key == height_colors.length - 1) { 
      box.css("background", value[1]); 
      return false; 
     } 
    }); 
});

給定一個可滾動的div #lipsum，並[<height>, <color>]值的數組，當我們滾動我們的元素，我們檢查它的scrollTop()值，並遍歷我們的數組，直到我們找到一個height值比當前scrollTop()低。

現在，這可以通過多種方式進行轉換。例如，不是計算可滾動div的位置，可以計算滾動位置相對於document的相對位置，然後替換您的數組，作爲要素數組以及要迭代的顏色。你會做同樣的事情，但是計算迭代元素的offset，直到你得到一個offset大於當前scrollTop的元素。

您的新陣列可能看起來像：

var height_colors = [ 
    ["#elem-a", "#FFF"], 
    ["#elem-b", "#555"], 
    ... 
]

這可能是在這種情況下，較好地保持了上次檢查元素的軌道，讓你使用「最後一個前」一旦你意識到你走得太遠了。（未選中該代碼）

// Assign a default color for scroll positions before your first element 
var last_color = "#FFF"; 
$.each(height_colors, function(key, value) { 
    var current = $(value[0]); 
    if(scrollPos < current.offset().top) { 
     $("body").css("background", last_color); 
    } 
    last_color = value[1]; 
});

您提供的鏈接似乎做同樣的事情，而且有人指出，你可以使用的.animate()的jQuery UI的變種顏色之間褪色（雖然我只有50例像素停止，200ms的動畫太長了）。

來源

2013-07-27 20:17:07

如何在div向下滾動時使背景顏色消失

回答

相關問題