Fixed navbar on top

Question

I want to fix navbar to top after scroll. I want the navbar to be fixed after scroll of the landing page. Is it possible to detect class in scroll and then make it fixed after the class one.

https://codepen.io/shahil/pen/VmXmpE

$(window).scroll(function(){
  var sticky = $('nav'),
      scroll = $(window).scrollTop();

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

html,body { height:100%; }
.one,.two,.three { min-height:100%; }

nav { background:green; }

.fixed {
  background:red;
    position: fixed;
    top:0; left:0;
    width: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">
  <nav>
    NAVBAR
  </nav>
  1

</div>
<div class="two">
  2
</div>
<div class="three">
  3
</div>

Answer 1

If you dont mind using a plugin for that, here is your solution.

Sticky JS

Sticky is a jQuery plugin that gives you the ability to make any element on your page always stay visible.