Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
jQuery Sticky Header Plugin
/*!
* jQuery Sticky Navigation Plugin
* Original author: Myriam Frisano (@mynimi)
*
* Licensed under the MIT license
*
* How to use:
* $('nameOfNavToBeMadeResponsive').stickyNav();
*/
;(function($, window, document, undefined) {
$.fn.stickyNav = function(options) {
// add options for classes
options = $.extend({
wrapperClass: 'sticky-nav-wrapper',
placeholderClass: 'sticky-nav-placeholder',
elementClass: 'sticky-nav-element',
zIndexValue: 10
}, options);
this.addClass(options.elementClass);
// create wrapper div
if (!$('.' + options.wrapperClass).length) {
this.wrap('<div class="' + options.wrapperClass + '" style="position: relative; top: 0; left: 0; z-index: ' + options.zIndexValue + ';"></div>');
}
// create placeholder div
if (!$('.' + options.placeholderClass).length) {
this.before('<div class="' + options.placeholderClass + '"></div>');
}
var glue = this,
topPos = this.offset().top;
// sticky function to change position from absolute to fixed, once top of element is even with top of window
function sticky() {
glue.prev('div').css('height', glue.height());
windowTop = $(window).scrollTop();
return glue.css({
position: windowTop > topPos ? "fixed" : "absolute",
'top': 0,
'left': 0
});
}
$(window).on("load resize scroll", function(e) {
sticky();
});
return this;
};
}(jQuery, window, document, this));
/*!
* jQuery Sticky Navigation Plugin
* Original author: Myriam Frisano (@mynimi)
* Licensed under the MIT license
* How to use:
* $('nameOfNavToBeMadeResponsive').stickyNav();
*/
!function(e,t,n,r){e.fn.stickyNav=function(n){function r(){return i.prev("div").css("height",i.height()),windowTop=e(t).scrollTop(),i.css({position:windowTop>o?"fixed":"absolute",top:0,left:0})}n=e.extend({wrapperClass:"sticky-nav-wrapper",placeholderClass:"sticky-nav-placeholder",elementClass:"sticky-nav-element",zIndexValue:10},n),this.addClass(n.elementClass),e("."+n.wrapperClass).length||this.wrap('<div class="'+n.wrapperClass+'" style="position: relative; top: 0; left: 0; z-index: '+n.zIndexValue+';"></div>'),e("."+n.placeholderClass).length||this.before('<div class="'+n.placeholderClass+'"></div>');var i=this,o=this.offset().top;return e(t).on("load resize scroll",function(e){r()}),this}}(jQuery,window,document,this);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment