jQuery：滚动时打开 div答案

【问题标题】：jQuery: unwrap divs while scrollingjQuery：滚动时打开 div
【发布时间】：2015-08-11 09:08:55
【问题描述】：

我有 4 个 div。默认情况下，第一个是“unwrapped”/“open”（height 是 600px）。下面的其他人有height 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 之后）“解包”（即将其 height 设置为 600px）第二个 div，然后解开第三个（滚动时 500px）等等？滚动时 div 的高度应该随着动画（不仅仅是height:40px->height:600px）缓慢增加。

这是一个简单的JSFiddle，有 4 个 div，只有第一个“展开”。

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

收听window.scroll()

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

并使用 JQuery animate 扩展您的 div

http://api.jquery.com/animate/

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

JSFiddle http://jsfiddle.net/65s11L11/2/

HTML

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

CSS

div { 
    height: 40px;    
    -webkit-transition: height 2s; /* Safari */
    transition: height 2s;
}
div.expanded { 
    height:600px;        
}
div:nth-child(1) {background-color:#cacaca;}
div:nth-child(2) {background-color:#e5ac30;}
div:nth-child(3) {background-color:#414042;}
div:nth-child(4) {background-color:#eaeaea;}

JQuery

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

【讨论】：