Javascript jQuery：滚动时展开div

我有4个div。默认情况下，第一个为“展开”/“打开”（其高度为

height

为

600px

）。下面的其他部件的高度为40px

div:nth-child(1) {background-color:#cacaca;height:600px}
div:nth-child(2) {background-color:#e5ac30;height:40px}
div:nth-child(3) {background-color:#414042;height:40px}
div:nth-child(4) {background-color:#eaeaea;height:40px}

如何在滚动时（例如，在滚动

260px

之后）将第二个

div

展开（即将其

高度设置为
600px
），然后展开第三个
div
），依此类推？滚动时，divs的高度应缓慢增加，并带有动画（不仅仅是
height:40px->height:600px
）

这里有一个简单的4个div，只有第一个“unwrapped”。
收听
window.scroll（）




并使用JQuery
animate
展开div




或者CSS
transitions
和jquery
addclass
来扩展您的div





JSFiddle

HTML

<div></div>
<div></div>
<div></div>
<div></div>

JQuery

$($('div').get(0)).addClass('expanded');
$(window).on('scroll', function(e) {
    var x = $(window).scrollTop();
    if(x > 125) {
        $($('div').get(1)).addClass('expanded');
    }
});

$($('div').get(0)).addClass('expanded');
$(window).on('scroll', function(e) {
    var x = $(window).scrollTop();
    if(x > 125) {
        $($('div').get(1)).addClass('expanded');
    }
});