如何使滚动图像变得粘稠

Question

我有一个Bootstrap导航栏，它固定在位并具有透明背景。让我们说它高80px。然后在我的文档正文中，我有img大约1000像素高（图像设置为宽度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

如果我说得对，请告诉我，欢呼。