Create a clone of your menu -- sticky menu

menucloner.js

// 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');
  }
}