0

我有以下代码： -

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到移动设备上的工作会阻止它在桌面版本上工作。

4

2 回答 2

0

您不应该使用自己的事件处理程序。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" );
        }
    }
});
于 2016-05-06T16:04:54.243 回答
-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();
}
于 2016-05-05T10:23:03.670 回答