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») никогда не запускается).

Есть ли способ вернуть меню, если пользователь перестает прокручивать мобильное устройство?

EDIT:

На самом деле, добавив e.originalEvent.touches[0].pageY работать на мобильных устройствах останавливает его от работы на настольной версии.

Answer 1

я решил изменить сценарий так, он обнаруживает, если пользователь активен или нет, который теперь работает на мобильный/рабочий стол: -

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

Answer 2

Вы не должны использовать свой собственный обработчик событий. Fullpage.js обеспечивает обратные вызовы, такие как onLeave или afterLoad, чтобы справиться со всем этим. И они будут работать и на сенсорных устройствах.

Функциональность Touch намного сложнее на 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"); 
     } 
    } 
});