我有以下代码: -
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
到移动设备上的工作会阻止它在桌面版本上工作。