文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使滚动的图像变得粘滞

问如何使滚动的图像变得粘滞
EN

Stack Overflow用户

提问于 2015-11-14 06:17:44

回答 1查看 479关注 0票数 0

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

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

<nav>

</nav>
<img>

或者使导航栏非常高，并以图像为背景，并在滚动发生时缩小导航栏并更改图像偏移量。

html

css

twitter-bootstrap

javascript

jquery

回答 1

Stack Overflow用户

发布于 2015-11-15 00:45:56

我想我得到了你想要的。

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

如果我没记错，请告诉我，干杯。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33702681

复制

相似问题

问如何使滚动的图像变得粘滞
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使滚动的图像变得粘滞EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使滚动的图像变得粘滞
EN