Javascript CSS Div滚动高度

我试图重现这里看到的效果：

但我正在尝试动画的高度。由于某些原因，向下滚动时效果很好，但向上滚动时，高度不会变回正常值。有什么想法吗

以下是我现在拥有的：

---

谢谢

虽然我说过这不是解决你问题的办法，但看起来这实际上是一个办法

在每个操作之后添加一个类。对于每种情况，类似于

展开

和

折叠

，并在制作动画之前检查该类是否存在。这样，动画在必要时才会触发

这样可以避免多次触发动画并对动画进行排队。这就是为什么如果你向下滚动了很多次，然后又滚动回到顶部，那么“扩展”动画会在你向上滚动很久之后触发（它必须等待每个“折叠”动画结束）

我的测试是：

$(window).scroll(function(){ 
    var $header = $('#header');
    if ($(this).scrollTop() > 50){  // x should be from where you want this to happen from top//
     if (!$header.hasClass('collapsed')) {
       $header.animate({"height":"100px"}, 1500, function() {
         $header.toggleClass('expanded collapsed');
       });
     }
    } 
    else{
      if (!$header.hasClass('expanded')) {
        $header.animate({"height":"470px"}, 1, function() {
         $header.toggleClass('expanded collapsed');
       });
      }
    }

});

---

标题应该以

expanded

class

开头，向上滚动在te js fiddle中也不起作用。这不是一个解决方案，但有一件事可以让您受益，那就是在每个操作之后添加一个类。对于每种情况，类似于

展开

和

折叠

，并在制作动画之前检查该类是否存在。这样，动画在必要时才会触发。

$(window).scroll(function(){ 
    var $header = $('#header');
    if ($(this).scrollTop() > 50){  // x should be from where you want this to happen from top//
     if (!$header.hasClass('collapsed')) {
       $header.animate({"height":"100px"}, 1500, function() {
         $header.toggleClass('expanded collapsed');
       });
     }
    } 
    else{
      if (!$header.hasClass('expanded')) {
        $header.animate({"height":"470px"}, 1, function() {
         $header.toggleClass('expanded collapsed');
       });
      }
    }

});