jQuery-使用touchmove隐藏菜单栏，但如果不再滑动，则再次显示

我有以下代码：-

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;
    });

我使用的是fullPage.js，这在桌面上运行良好，当我滚动到下一页时，会隐藏菜单，如果我停止将菜单动画滑回其固定位置

在移动设备上，当我向下滚动时，菜单会按预期隐藏，但导航栏会永久消失（即removeClass（“隐藏导航栏”）从未触发）

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

编辑：

---

实际上，添加

e.originalEvent.touchs[0].pageY

在移动设备上工作会阻止它在桌面版本上工作。

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

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();
}

---

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

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" );
        }
    }
});

---

这不是解决问题的办法。看看我的答案。

 $('#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" );
        }
    }
});