Закрепить блок меню

$(window).on('scroll', function(e) { 
  var $header = $('.header'), 
      $menu = $('.main-menu'), 
      scroll = $(this).scrollTop(); 
   
  if (scroll >= $header.height()) { 
    $menu.addClass('fixed'); 
  } else { 
    $menu.removeClass('fixed'); 
  } 
});

body { 
  height: 1000px; 
} 
 
.header { 
  background: #eee; 
  height: 80px; 
} 
 
.main-menu { 
  width: 100%; 
  height: 30px; 
  background: #f00; 
} 
 
.main-menu.fixed { 
  position: fixed; 
  top: 0; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<section class="header"> 
  Шапка 
</section> 
 
<!--//шапка--> 
 
<!--***МЕНЮ***--> 
 
<section class="main-menu"> 
  Меню 
</section>