Hide a menu on the top of the page when scrolling down, and show it when scrolling up. Check out the example here: http://codepen.io/anon/pen/dPGggg

togglemenu.js

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