How to Make Your Navigation Appear on Scroll with jQuery

Fix it, and hide it

Make sure your navigation has a fixed position and is set to display: none. Here is some sample css:

.menu {
  position: fixed;
  top: 0px;
  z-index: 9999;
  width: 100%; 
  height: 75px; 
  background-color: #ddd;
  display: none;

Make it Fade In with jQuery

Here we are telling the menu to fade in at a speed of 500ms one we’ve scrolled past the 200px mark from the top of the page, otherwise fade back out.

    if ($(this).scrollTop() > 200) {
    } else {

See it in action