Sticky header

HTML

<div class="content-body">
    <div class="header-top">
      <p>I have a logo in this banner</p>
    </div>

    <div class="menu-wrapper" id="masthead">
      <p>There is a secondary logo in this banner</p>
    </div>
</div>

CSS

.content-body {
  height:1000px;
  background-color:#dbdbdb;
}

p {
  margin:0;
}

.header-top {
  width:100%;
  height:100px;
  background-color:#a0a0a0;
}

#masthead {
  width:100%;
  height:100px;
  background-color: #fbc957;
}

.fixed-header {
    position: fixed !important;
    top: 0;
    width: 100%;
}

@media (max-width:6500px) {
    .header-top,
    #masthead {
      height:80px;
    }
}

JavaScript

function getMastheadHeight() {
    return jQuery('#masthead').height();
}

jQuery(window).scroll(function(){
    if (jQuery(window).scrollTop() >= getMastheadHeight()) {
        jQuery('#masthead').addClass('fixed-header');
    }
    else {
        jQuery('#masthead').removeClass('fixed-header');
    }
});


jQuery(window).scroll(function(){
    if (jQuery(window).scrollTop() >= getMastheadHeight()) {
        jQuery('#masthead:not(.menu-absolute)').addClass('sticky-mob-menu');
    }
    else {
        jQuery('#masthead:not(.menu-absolute)').removeClass('sticky-mob-menu');
    }
});