如何制作具有粘性的滚动图像

How to make a scrolling image that becomes sticky

本文关键字：滚动 图像 有粘性 何制作      更新时间：2023-09-26

我有一个Bootstrap导航栏，它固定在适当的位置，有一个透明的背景。假设它有80像素高。然后在我的文档正文中，我有一个大约1000像素高的img（图像的宽度刚刚设置为100%）。所以我想做的是，当用户向上滚动时，图像会像它应该的那样向上滚动，但当它达到只有80px的图像显示的点时，图像就会固定在位置上，并保持导航栏的背景。

我不确定是否最好保留我当前的代码：

<nav>
</nav>
<img>

或者，最好是将图像作为背景，使导航栏非常高，并在滚动时缩小导航栏并更改图像偏移。

我想我按照你想要的方式得到了它。

$(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

如果我说得对，请告诉我，干杯。

相关文章：