0

ここで見られる効果を再現しようとしています: http://jsfiddle.net/surendraVsingh/aATHd/2/

しかし、私は高さをアニメーション化しようとしています。どういうわけか、下にスクロールするとうまくいきますが、上にスクロールすると高さが元に戻りません。何か案は？

これが私が今持っているものです：http://justinledelson.com/new/

$(window).scroll(function(){
    if ($(this).scrollTop() > 250){
     $('#header').animate({"height":"100px"}, 1500);
  } 
  else{
    $('#header').animate({"height":"470px"}, 1);
  }
});

ありがとう！

4

1 に答える 1

0

これはあなたの問題の解決策ではないと言いましたが、実際には解決策のようです。

各アクションの後にクラスを追加します。expandedや状況collapsedごとに、アニメーションを実行する前にそのクラスが存在するかどうかを確認します。そうすれば、アニメーションは必要になるまでトリガーされません。

これにより、アニメーションをキューに入れてアニメーションを複数回トリガーすることを回避できます。そのため、何度も下にスクロールしてから上に戻ると、上にスクロールしてからかなり後に「展開」アニメーションがトリガーされます (それぞれの「折りたたみ」アニメーションが終了するまで待たなければなりませんでした)。

私のテストは：

$(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ヘッダーはクラスで始まる必要があります

于 2013-06-08T01:47:46.050 に答える