// Create a clone of the menu, right next to original. jQuery('.header') .addClass('original') .clone().insertAfter('.header') .addClass('cloned') .css('position','fixed') .css('top','0') .css('margin-top','0') .css('z-index','500') .removeClass('original') .hide(); scrollIntervalID = setInterval(stickIt, 5); // refresh rate for function function stickIt() { var orgElementPos = jQuery('.original').offset(); var customWidth = jQuery(window).width(); // fullwidth continer //console.log(customWidth); orgElementTop = orgElementPos.top+500; // adjust offset when sticky menu is activated if (jQuery(window).scrollTop() >= (orgElementTop)) { // scrolled past the original position; now only show the cloned, sticky element. // Cloned element should always have same left position and width as original element - or not. orgElement = jQuery('.original'); coordsOrgElement = orgElement.offset(); leftOrgElement = 0;//coordsOrgElement.left; widthOrgElement = customWidth;//orgElement.css('width'); jQuery('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement+'px').show(); jQuery('.original').css('visibility','hidden'); } else { // not scrolled past the menu; only show the original menu. jQuery('.cloned').hide(); jQuery('.original').css('visibility','visible'); } }