Skip to content

Instantly share code, notes, and snippets.

@harmesy
Created August 19, 2013 23:48
Show Gist options
  • Save harmesy/6275520 to your computer and use it in GitHub Desktop.
Save harmesy/6275520 to your computer and use it in GitHub Desktop.
Easy appearing top menu. Becomes visible after scrolling below the header.
(function($) {
'use strict';
var $window = $(window);
$.fn.appearingMenu = function() {
var targetElement = $('header');
var menuElement = $(this);
menuElement.hide();
menuElement.css({
'position': 'fixed',
'top': '0px',
})
$window.on('scroll.appearingMenu resize.appearingMenu', function() {
if($window.scrollTop() >= targetElement.height() && menuElement.is(':hidden')) {
menuElement.slideDown({duration: 200});
} else if($window.scrollTop() < targetElement.height() && menuElement.is(':visible')) {
menuElement.slideUp({duration: 200});
}
});
}
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment