Cacher is the code snippet organizer for pro developers

.header {
  &,
  &__wrap {
    height: 50px;
  }
  &.fixed &__wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 20;
    box-shadow: 0 0 7px #a7a7a7;
  }
}

$(window).on("load scroll", function () {
  var scrollTop = $(window).scrollTop(),
    head = $('#header'),
    headTop = head.offset().top,
    headWrap = $('#headerWrap');
  if (scrollTop >= headTop) {
    headWrap.addClass('fixed');
  } else {
    headWrap.removeClass('fixed');
  }
});

<div id="header" class="header">
  <div id="headerWrap" class="header__wrap">
  
  </div>
</div>