メソッドのスクロールと停止キューイングでのJQueryの最適化

Question

私は、ユーザーがスクロールする回数だけ明らかに実行されるスクロールでJQueryを使用していますが、ユーザーがスクロールして十分速くスクロールするとアニメーションが遅れます。これは、スクロールが完了するたびにメソッドが実行されるためです。私はあなたがそれを改善するためのアイデアがあれば私に教えてください、私は下のコードを最適化することができます何をやった！

$(document).ready(function() { 
    var count = 0; 
    var speed = 100; 
    var triggerY = 50; 
    $(window).on('scroll', function() { 
     count++; 
     if (count>10) { 
      var currentY = window.pageYOffset; 
      if (currentY < triggerY) { 
       if ($('#accountHolder').height() != 70) { 
        $('#barTitle').animate({fontSize: "40px"}, speed); 
        $('#barSlogan').fadeIn(); 
        $('#accountHolder').animate({height: "70px"}, speed); 
        $('#accountPosition').animate({top: "13px"}, speed); 
       } 
      } else { 
       if ($('#accountHolder').height() != 60) { 
        $('#barTitle').animate({fontSize: "32px"}, speed); 
        $('#barSlogan').fadeOut(); 
        $('#accountHolder').animate({height: "50px"}, speed); 
        $('#accountPosition').animate({top: "5px"}, speed); 
       } 
      } 
      count = 0; 
     } 
    }); 
}); 

Answer 1

scrollイベントは、それがバインドさ要素に毎回ユーザーがスクロールを解雇されたとして、非常にコストのかかる作業です。

パフォーマンスをお探しの場合は、JSアニメーションではなくCSSアニメーションを使用してください。 CSSアニメーションははるかに速く、ラグフリーです。

これは私が正確に意味するものです。

$(document).ready(function() { 
    var count = 0; 
    var speed = 100; 
    var triggerY = 50; 
    $(window).on('scroll', function() { 
     count++; 
     if (count>10) { 
      var currentY = window.pageYOffset; 
      if (currentY < triggerY) { 
       if ($('#accountHolder').height() != 70) { 
        $('#barTitle').addClass('increase-font-size') 
        $('#barSlogan').addClass('show'); 
        $('#accountHolder').addClass('increase-height'); 
        $('#accountPosition').addClass('pull-down'); 
       } 
      } else { 
       if ($('#accountHolder').height() != 60) { 
        $('#barTitle').removeClass('increase-font-size') 
        $('#barSlogan').removeClass('show'); 
        $('#accountHolder').removeClass('increase-height'); 
        $('#accountPosition').removeClass('pull-down'); 
       } 
      } 
      count = 0; 
     } 
    }); 
}); 

これらのクラスにはアニメーションスタイルが必要です。

.increase-font-size { 
    font-size: 40px; 
    -webkit-transition: font 2s; 
    transition: font 2s; 
} 
.show { 
    opacity: 1; 
    -webkit-transition: opacity 2s; 
    transition: opacity 2s; 
} 
.increase-height { 
    height: 70px; 
    -webkit-transition: height 2s; 
    transition: height 2s; 
} 
.pull-down { 
    top: 13px; 
    -webkit-transition: top 2s; 
    transition: top 2s; 
}