如何製作一個變得粘滯的滾動圖像

Question

我有一個固定位置並具有透明背景的Bootstrap導航欄。假設它是80px高。然後在我的文檔的主體中，我有一個大約1000px高的img（圖像剛設置爲寬度100％）。所以我想要發生的是當用戶向上滾動時，圖像會按照原樣滾動，但是當它達到只顯示圖像80px的點時，圖像將固定在位置上並保持導航的背景酒吧。

我不知道這是否會更好地保持我當前的代碼：

<nav> 

</nav> 
<img> 

或者，如果這將是更好地使導航欄確實與圖像作爲背景高大收縮導航並在滾動發生時更改圖像偏移量。

Answer 1

我想我已經按照你想要的方式。

$(window).scroll(function() { 
if ($(this).scrollTop()> 500) { 
$('#menu').css('background-image', 'url(' + "https: 
//vincentloy.files.wordpress.com/2010/09/ 
tragic-1-city-skyscrapers.jpg" + ')'); 
$('#menu').css('position', 'fixed'); 

} else { 
$('#menu').css('background', 'transparent'); 
$('#menu').css('position', 'relative'); 
}; 
}); 

http://codepen.io/damianocel/pen/ZbVNvq

讓我知道，如果我有這個權利，歡呼聲。