保持文本移動Div

Question

我試圖讓圖像在滾動上消失 - 我已經完成了。

但是，正如你可以here下面的文本和菜單離圖片太遠 - 當我縮小瀏覽器時，距離增加。

我想保持文本在滾動上覆蓋圖像的方式;類似的風格this.

缺乏JSFiddle的Aplogoise - 似乎無法讓它工作。

我試圖用this來改變它，但我失去了文字滾動圖像（如FearTheGrizzly ref）。

簡而言之 - 我想讓文字靠近頂部的圖像;並讓它隨瀏覽器一起移動。

Answer 1

問題是當您調整瀏覽器的大小時，背景圖片會改變高度（由於background-size:100% auto;，但是元素本身並沒有更新，您可以通過實際調整div的大小來修正這個問題，而不僅僅是背景 - 圖像，但是讓我們假設你不想這樣做，在這種情況下，您需要調整使用JavaScript股利，以使內容的其餘部分將出現在正確的地方。

$(document).ready(function() { 
    $homeDiv = $('.home'); 
    $(window).resize(); //call this onload to make sure the div is initially right 
}); 
$(window).resize(function() { 
    ($homeDiv).height($(window).width()/1440 * 600); 
    console.log($(window).width()/1440 * 600); 
}); 

當然然後你的褪色可能不會像你期望的那樣行事，所以改變你的JS中的'opacity'行：

'opacity' : 1 - windowScroll/($(window).width()/1440 * 600 - 30) 

這確實取決於您的圖像具有一致的尺寸。有一些方法可以在不知道這一點的情況下做到這一點，我相信，但這是最簡單的。