jquery - jQuery - touchmove を使用してメニューバーを非表示にしますが、スライドしなくなったら再び表示します

Question

私は次のコードを持っています:-

jQuery

$(document).ready(function() {
    $('html').on('DOMMouseScroll mousewheel touchmove', function (e) {
      if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0 || e.originalEvent.touches[0].pageY) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
        //scroll down
        console.log('Down');
        $( ".navbar" ).addClass( "hide-nav-bar" );
      } else {
        //scroll up
        console.log('Up');
        $( ".navbar" ).removeClass( "hide-nav-bar" );
      }
      //prevent page fom scrolling
      //return false;
    });

CSS

    .navbar {
        -webkit-transition:-webkit-transform 0.7s .3s ease;
           -moz-transition:   -moz-transform 0.7s .3s ease;
            -ms-transition:    -ms-transform 0.7s .3s ease;
                transition:        transform 0.7s .3s ease;
      -webkit-backface-visibility: hidden;
       -webkit-transform: translate3d(0px, 0px, 0px);
    }
    .navbar.hide-nav-bar{
       -webkit-transform: translate(0, -100%);
       -moz-transform: translate(0, -100%);
       -ms-transform: translate(0, -100%);
       transform: translate(0, -100%);
       -webkit-backface-visibility: hidden;
    }

私は fullPage.js を使用していますが、これはデスクトップで正常に機能しています。次のページにスクロールするとメニューが非表示になり、アニメーション化されたメニューをスライドして固定位置に戻すのをやめると。

モバイルでは、メニューを下にスクロールすると、期待どおりに非表示になりますが、ナビゲーション バーは完全に消えます (つまり、removeClass("hide-nav-bar") が起動されることはありません)。

ユーザーがモバイル デバイスでスクロールを停止した場合にメニューを元に戻す方法はありますか?

編集：

e.originalEvent.touches[0].pageY実際、モバイル デバイスで動作するように追加すると、デスクトップ バージョンで動作しなくなります。