javascript - 如何使滚动图像变粘

Question

我有一个位置固定且背景透明的 Bootstrap 导航栏。假设它有 80 像素高。然后在我的文档正文中，我有一个大约 1000 像素高的 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

如果我做对了，请告诉我，干杯。