如何制作一个变得粘滞的滚动图像

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

让我知道，如果我有这个权利，欢呼声。