如果您查看该网站:
http://eyeheartworld.org/pages/the-cause
然后向下滚动，我在 codepen 上找到了一个概念的实现(当你向下滚动时，导航栏滚动并固定)
var header = $("#guide-template");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= window.innerHeight) {
header.addClass("fixed");
} else {
header.removeClass("fixed");
}
});
( http://codepen.io/simpleminded/pen/noaJj ) 我只想快速了解一下首页上的图片是如何工作的。它们滚动到顶部，然后在其他图片滚动到它们上方时保持不动。
最佳答案
这是一个简单的例子，将 position: fixed; 添加到 HTML 内容顶部的 block 中。这是一个非常基本的示例:
body{
margin: 0;
padding: 0;
}
#top-bar{
height: 40px;
width: 100%;
background-color: #000000;
color: #FFFFFF;
position: fixed;
}
#content{
height: 3000px;
padding-top: 40px;
}<!DOCTYPE HTML>
<html>
<head></head>
<body>
<div id="top-bar"></div>
<div id="content">
AAA<br />
BBB<br />
CCC<br />
DDD<br />
EEE<br />
FFF<br />
XXX<br />
YYY<br />
</div>
</body>
</html>关于javascript - 如何实现滚动到固定效果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31668922/