Sticky Nav

by Taufik Nurrohman

HTML

<div id="container">
    <nav>Sticky!</nav>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
    lorem<br>
</div>

CSS

#container {
  margin-top:200px;
  height:3000px;
}

nav {
  height:50px;
  padding:10px;
  background-color:black;
  color:white;
}

nav.fixed {
  position:fixed;
  top:0px;
  right:0px;
  left:0px;
  z-index:999;
}

JavaScript

(function($) {
    var $window = $(window),
        $nav = $('nav'),
        offset = $nav.offset().top;
    $window.on("scroll", function() {
        if (offset < $(this).scrollTop()) {
            $nav.addClass("fixed");
        } else {
            $nav.removeClass("fixed");
        }
    });
})(jQuery);