ユーザーのスクロールで要素をアニメーション化する

Question

現在、以下のロジックを使用してナビゲーションブロックをアニメーション化しています。ユーザーが5pxを超えてスクロールするとうまくいき、要素がビューポートからアニメーション化されます。しかし、ユーザーは要素の位置を元の位置に戻すためにウィンドウの上部をスクロールする必要があります。

ユーザーがページの上部にスクロールするのを待つのではなく、ユーザーがスクロールするとすぐにアニメーション機能をどのようにトリガーするのですか？ （ページの先頭に行くまで待たずに）

var _throttleTimer = null; 
    var _throttleDelay = 100; 
    var $window = $(window); 
    var $document = $(document); 

    $document.ready(function() { 

     $window 
      .off('scroll', ScrollHandler) 
      .on('scroll', ScrollHandler); 

    }); 

    function ScrollHandler(e) { 
     clearTimeout(_throttleTimer); 
     _throttleTimer = setTimeout(function() { 
      //console.log('scroll'); 

      if($(window).scrollTop() > 5) { 
       $(".mobile_header .content").animate({ 
        top: "-34px" 
        }, 100); 
      } else { 
       ////Need help here 
       $(".mobile_header .content").animate({ 
        top: "34px" 
        }, 100); 
      } 

    }, _throttleDelay); 
} 

Answer 1

Heresは解決策です。ユーザーが下にスクロールするかスクロールするかを検出するロジックを変更する必要がありました。

var _throttleTimer = null; 
var _throttleDelay = 100; 
var lastScrollTop = 0; 
var $window = $(window); 
var $document = $(document); 

$document.ready(function() { 
    $window 
    .off('scroll', ScrollHandler) 
    .on('scroll', ScrollHandler); 
}); 

function ScrollHandler(e) { 
    clearTimeout(_throttleTimer); 
    _throttleTimer = setTimeout(function() { 
     console.log('scroll'); 

     var st = $(this).scrollTop(); 

     if (st > lastScrollTop && $(window).scrollTop() > 5){ 
      $(".mobile_header .content").animate({ 
       top: "-34px" 
      }, 100); 
     } else { 
      $(".mobile_header .content").animate({ 
       top: "34px" 
      }, 100); 
     } 

     lastScrollTop = st; 
    }, _throttleDelay); 
}