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

【问题标题】：jQuery - Using touchmove to hide menubar but show again if no longer slidingjQuery - 使用 touchmove 隐藏菜单栏但如果不再滑动则再次显示
【发布时间】：2016-05-07 00:07:06
【问题描述】：

我有以下代码：-

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 会阻止它在桌面版本上运行。

【问题讨论】：

标签： jquery fullpage.js touchmove

【解决方案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" );
        }
    }
});

【讨论】：

【解决方案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();
}

【讨论】：

不是这样。看看我的回答。