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（"隐藏导航栏"）从未启动）。

如果用户停止在移动设备上滚动，有没有办法恢复菜单？

编辑：

实际上，将e.originalEvent.touches[0].pageY添加到移动设备上会阻止它在桌面版本上工作。

Answer 1

您不应该使用自己的事件处理程序。Fullpage.js提供了诸如onLeave或afterLoad之类的回调来处理所有这些。他们也将在触摸设备上工作。

触摸功能在fullpage.js中比鼠标事件复杂得多。

你应该使用这样的东西：

 $('#fullpage').fullpage({
    afterLoad: function(anchorLink, index){
        var loadedSection = $(this);
        //using index
        if(index > 1){
             $( ".navbar" ).addClass( "hide-nav-bar" );
        }
        else{
            $( ".navbar" ).removeClass( "hide-nav-bar" );
        }
    }
});

Answer 2

我决定更改脚本，这样它就可以检测用户是否处于活动状态，现在可以在移动/桌面上工作：-

var timeoutID;
function setup() {
    this.addEventListener("mousemove", resetTimer, false);
    this.addEventListener("mousedown", resetTimer, false);
    this.addEventListener("keypress", resetTimer, false);
    this.addEventListener("DOMMouseScroll", resetTimer, false);
    this.addEventListener("mousewheel", resetTimer, false);
    this.addEventListener("touchmove", resetTimer, false);
    this.addEventListener("MSPointerMove", resetTimer, false);
    startTimer();
}
setup();
function startTimer() {
    // wait 2 seconds before calling goInactive
    timeoutID = window.setTimeout(goInactive, 1000);
}
function resetTimer(e) {
    window.clearTimeout(timeoutID);
    goActive();
}
function goInactive() {
    $( ".navbar" ).addClass( "hide-nav-bar" );
}
function goActive() {
    $( ".navbar" ).removeClass( "hide-nav-bar" );   
    startTimer();
}