<header>
  ...
</header>

<nav>
  ...
</nav>

<main>
  ...
</main>

<footer>
  ...
</footer>

<style>
.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}
</style>

<script>
$(function() {
  var $win = $(window),
      $main = $('main'),
      $nav = $('nav'),
      navHeight = $nav.outerHeight(),
      navPos = $nav.offset().top,
      fixedClass = 'is-fixed';

  $win.on('load scroll', function() {
    var value = $(this).scrollTop();
    if ( value > navPos ) {
      $nav.addClass(fixedClass);
      $main.css('margin-top', navHeight);
    } else {
      $nav.removeClass(fixedClass);
      $main.css('margin-top', '0');
    }
  });
});
</script>