<section id="screen1">

  <p>Scroll down</p>

  <nav>
     <ul>
   <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Contact</a></li>
     </ul>
  </nav>

</section>

<section id="screen2"></section>
<section id="screen3"></section>

/*
Tutorial Name: Scroll To Top Then Fixed Navigation Effect With JQuery and CSS
https://stanhub.com/scroll-to-top-then-fixed-navigation-effect-with-jquery-and-css-free-download/
Description: Create a sticky navigation bar that remains fixed to the top after scroll
Author: Stan Kostadinov
Author URI: https://stanhub.com
Version: 1.0.0 - 11.01.2014
*/

* {margin: 0; padding: 0;}

a {text-decoration: none;}

/* This class is added on scroll */
.fixed {
  position: fixed;
  top: 0;
  height: 70px;
  z-index: 1;
}

body {
  color: #fff;
  font-family: 'open-sans-bold', AvenirNext-Medium, sans-serif;
  font-size: 18px;
  text-align: center;
}

/* Navigation Settings */
nav {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 70px;
  background: #fff;
}

nav li {
  display: inline-block;
  padding: 24px 10px;
}

nav li a {
  color: #757575;
  text-transform: uppercase;
}

section {
  height: 100vh;
}

/* Screens Settings */
#screen1 {
  background: #43b29d;
}

#screen1 p {
  padding-top: 200px;
}

#screen2 {
  background: #efc94d;
}

#screen3 {
  background: #e1793d;
}

@media only screen and (max-width: 520px) {

  nav li {
    padding: 24px 4px;
  }

  nav li a {
    font-size: 14px;
  }

}

   $(document).ready(function(){
     $(window).bind('scroll', function() {
     var navHeight = $( window ).height() - 70;
       if ($(window).scrollTop() > navHeight) {
         $('nav').addClass('fixed');
       }
       else {
         $('nav').removeClass('fixed');
       }
    });
  });