A Pen by GOCHO MUGO I..

index.html

<div class="filler one"></div>
<nav id="navbar">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</nav>
<div class="filler two"></div>

script.js

(function($, undefined){
  "use strict";

  var $navbar = $("#navbar"),
      y_pos = $navbar.offset().top,
      height = $navbar.height();

  $(document).scroll(function(){    
    var scrollTop = $(this).scrollTop();

    if (scrollTop > y_pos + height){
      $navbar.addClass("navbar-fixed").animate({ top: 0 });
    } else if (scrollTop <= y_pos){        
      $navbar.removeClass("navbar-fixed").clearQueue().animate({ top: "-48px" }, 0);
    }
  });
  
})(jQuery, undefined);

Sticky-Navbar.markdown

Sticky Navbar

A typical navbar that sticks to the top of the document when you scroll past it.

Forked from Nick L Olsen's Pen Sticky Navbar.

Forked from Secret Sam's Pen Sticky Navbar.

A Pen by GOCHO MUGO I. on CodePen.

License.

style.scss

.navbar-fixed {
  position: fixed;
  top: -48px;
}


/*----------------------
  $NAVBAR
    basic navbar styling
  ----------------------*/

nav {
  width: 100%;
  color: #bbb;
  background: #2e2e2e;
  font-weight: bold;
  letter-spacing: 0.025em;
}

nav ul {
  text-align: center;
  margin: 0;
}

nav ul li {
 display: inline-block;
 padding: 0 3em 0 3em;
 line-height: 3em;
}

nav ul li:hover {
  background: #00939C;
}


/*----------------------
  $BODY
  ----------------------*/

body {
  background: #0B6AD4;
}

/*----------------------
  $MISC
  ----------------------*/

.filler {
  width: 1px;
  height: 200px;
}

.two {
  height: 3000px;
}