Question

我有4个div。默认情况下，第一个是“解包”/“打开”（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}

如何在滚动时（例如在滚动height之后）“展开”（即将其600px设置为div）第二个260px，然后打开第三个一个（滚动500px时）等等？滚动时div的高度应该会轻微增加，并带有动画（不只是height:40px->height:600px）。

这是一个简单的JSFiddle，包含4个div，只有第一个“unwrapped”。

Answer 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');
    }
});

jQuery：滚动时解包div

1 个答案: