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会阻止它在桌面版上工作。

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

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

2 个答案: