整体概念
当我继续向下滚动页面时,不同div的css display
属性将根据滚动的距离从none
更改为block
。可以看到我遇到问题的类似例子here。当用户滚动时,钱包“旋转”,这实际上只是图像变化。另一个例子是here。
设计理论
display:none
更改为display:block
; 据我所知,这是怎么做的(虽然我不是医生,所以谁知道)。
的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);
});
我对这段代码的想法是:
当scrollTop()
anImage
值(包含图像的受尊重div)等于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;
}
答案 0 :(得分:0)
所以看看这个小提琴:http://jsfiddle.net/6XweD/2/。
如果您注意到我将样式从display:none
更改为opacity:0
,以便函数$(this).height()
正常工作,并且我在div的top
位置做了一些调整。
希望这样可以正常工作:)