Edit in JSFiddle

$( document ).ready( function() {
  var navOffset = $( 'nav' ).offset();
  $( window ).scroll( function() {
    if ( $( document ).scrollTop() > navOffset.top ) {
      $( 'nav' ).addClass( 'active' );
    }
    else {
      $( 'nav' ).removeClass( 'active' );
    }
  });
});

<header>
  <h1>header</h1>
</header>
<nav>
  <p>
    1111
    2222
    3333
    4444
  </p>
</nav>
<div class="content">

</div>

html,body {
  margin: 0px;
  padding: 0px;
}

header {
  text-align: center;
}

nav {
  text-align: center;
  background-color: yellow;
  padding: 10px 0px;
  width: 100%;
}

.content {
  height: 2000px;
}

.active {
  position: fixed;
  top: 0px;
}