javascript - 根据滚动方向切换移动导航

Question

我有一个移动导航，我想根据视口(viewport)滚动的方向隐藏/显示它。因此，如果向下滚动我希望它隐藏，向上滚动我希望它显示。

我当前的代码如下所示。它只是在滚动顶部切换。有人吗？

$(function() {
    $(window).on("scroll touchmove", function () {
        $('.mobile-nav').toggleClass('tiny', $(document).scrollTop() > 0);
    });
});

Answer 1

也许是这样的:

var menu_height = 80;
var menu_visible = true;
var old_scroll = $(window).scrollTop();

function checkMenu() {
    new_scroll = $(window).scrollTop();
    if (old_scroll < new_scroll && new_scroll > 0) {
        // Scroll down
        if (menu_visible == true) {
            toggleMenu();
        }
    } else if (old_scroll > new_scroll) {
        // Scroll up
        if (menu_visible != true) {
            toggleMenu();
        }
    }
    old_scroll = new_scroll;
}

function toggleMenu() {
    if (menu_visible == true) {
        // Hide
        $('#menu').animate({top: '-='+menu_height+'px'}, 200, function(){ $(this).css('display', 'none') });
        menu_visible = false;
    } else {
        // Show
        menu_visible = true;
        $('#menu').css('display', 'block').animate({top: '+='+menu_height+'px'}, 200);
    }
}

$(document).ready(function() {
    // Show / hide menu on scroll
    setInterval(checkMenu, 100);
});

代码笔:http://codepen.io/anon/pen/dPGggg