总体概念
当我继续向下滚动页面时，display不同 div 的 css 属性将根据滚动距离从none变为。可以在这里block看到我无法完成的类似示例。当用户滚动时，钱包会“旋转”，这实际上只是图像的变化。另一个例子是here。
设计理论
- 获取 scrollTop() 数字，当达到该数字时，会将 div 的 CSS 属性从 更改
display:none为display:block； - 获取包含不同图像的不同 div 的 ID。
- 将每个特定图像设置为具有特定的 scrollTop() 编号，当达到该编号时，它的显示设置将打开。
据我所知，这就是它的完成方式（虽然我不是医生，所以谁知道）。
jQuery
$(document).ready(function() {
function setImage(anImage, contentArea){
$.when(contentArea == $(window).scrollTop()).then(function(){
$(anImage).css('display', 'block');
});
}
setImage('#bg1', 200);
setImage('#bg2', 300);
setImage('#bg3', 400);
});
我在这段代码背后的想法是：
当（尊重的 div 包含图像）的scrollTop()值anImage等于contentArea（scrollTop() 值设置为显示从无变为块时的值）时，则anImage的 CSS 值将变为display:block. 我不担心删除以前的图像，因为新图像具有更高的 z-index。
HTML
<div id="content">
<div id="bg1"></div>
<div id="bg2"></div>
<div id="bg3"></div>
</div>
CSS
html,body{height:100%;margin:0;}
#content{
background:#333333;
height:1500px;
z-index:1;
}
#bg1{
background:blue;
height:400px;
width:100%;
z-index:2;
position:fixed;
top:200px;
display:none;
}
#bg2{
background:green;
height:400px;
width:100%;
z-index:3;
position:fixed;
top:400px;
display:none;
}
#bg3{
background:red;
height:400px;
width:100%;
z-index:4;
position:fixed;
top:400px;
display:none;
}