Skip to content

Instantly share code, notes, and snippets.

@i-stos
Created April 23, 2012 15:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save i-stos/2471611 to your computer and use it in GitHub Desktop.
Save i-stos/2471611 to your computer and use it in GitHub Desktop.
JavaScript: jQuery Persistant Navigation Menu
/**
* Name: Persistant Navigation Menu
* Type: jQuery Plugin - jQuery v1.7.2
* Description: Makes any navigation menu or DOM element persistant
* Author: Billy Onjea (blog.istocode.com)
* --------------------------------------------------------------------
* Minimum CSS Classes:
* --------------------------------------------------------------------
* .persisting {
* position: fixed;
* top: 0;
* z-index: 990;
* visibility: hidden;
* }
* .visible { visibility: visible !important; }
* --------------------------------------------------------------------
* Call it like so: $('.menu').Persnav();
* --------------------------------------------------------------------
**/
(function($) {
var pnav = {
persist: function(thisClone) {
return this.each(function(i, domEl) {
var top = $(this).offset().top;
if ($(window).scrollTop() > top) {
thisClone.addClass('visible');
} else {
thisClone.removeClass('visible');
}
});
}
};
$.fn.Persnav = function() {
var $this = $(this);
var thisClone = $this.clone().addClass('persisting');
$this.before(thisClone);
$(window).scroll(function() {
return pnav['persist'].call($this, thisClone);
});
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment