Skip to content

Instantly share code, notes, and snippets.

@lutsen
Last active August 29, 2015 14:06
Show Gist options
  • Save lutsen/0b9a98e2ea40e4adf229 to your computer and use it in GitHub Desktop.
Save lutsen/0b9a98e2ea40e4adf229 to your computer and use it in GitHub Desktop.
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
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);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment