Question

我目前正在创建一个单页滚动网站，有几个div。在滚动时，这些div然后使用jQuery更改高度和位置以创建视差效果。

我快速example here我正在努力实现的目标，这个例子有两个div。但是，如果我要添加更多div（5或6），那么我不确定如何在jQuery中编写代码。

当绿色div位于页面顶部并且它的高度等于文档高度的100％时，我想要第三个div进行滚动。所以实际上，绿色div应该作为红色div一次它的全高。我知道我可以使用if / else的加载来确定文档高度是否等于某个东西，但有更清晰的方法吗？

这就是我目前在jQuery方面所拥有的，但我不知道从哪里开始：

$(document).scroll(function(){
    cs = $(document).scrollTop();
    $('.base').css({'height':700-cs});
    $('.one').css({'height':cs, 'top':700-cs});
})

Answer 1

我有一些东西可以让你做到这一点：

$(document).scroll(function(){
    cs = $(document).scrollTop();
    $('.base').css({'height': 700-cs});
    $('.one').css({'height': 1400-cs});
    $('.two').css({'height': 2100-cs});
});

结合这个改变的CSS：

body {
    margin: 0;
    padding:0;
    height:4000px;
}
div.item {
    width:100%;
    height:100%;
    background:red;
    max-height:700px;
}
div.item.one {
    top:100%;
    height:0;
    background:green;
}
div.item.two {
    bottom:0;
    height:0;
    background:blue;
    display: block;
}
img {
    right:50%;
    top:50%;
}

现在由你来定位图像。

根据滚动位置按顺序更改多个div的高度和位置

1 个答案: