%script(src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js")
%script(src="sticky.js")
%link{:rel => :stylesheet, :type => :"text/css", :href => "sticky.css"}
%body 
.header Header
.nav Navigation
.content
  %h1 Simple sticky navigation bar
  %p Using jQuery we add (or remove) a sticky class to the navigation bar. The sticky class fixes the position.
  %p This happens whenever the page is scrolled. We check to see how far down the page has scrolled, if this number is greater than the height of the header, we add the sticky class to the navigation.
  %p You can already achieve this effect using only CSS with <b>position: sticky;</b> but it's not supported by many browsers at the moment.

/* google font */
@import url(https://fonts.googleapis.com/css?family=Montserrat);

$nav-height: 60px;

body {
  text-align:center;
  margin:0;
  padding:0;
  font-family: 'Montserrat', sans-serif;
  color:rgba(0,0,0,0.87);
}

.header {
  width:100%;
  height:100px;
  font-size:50px;
  line-height:100px;
  text-transform:uppercase;
  font-weight:bold;
}

.nav {
  width:100%;
  height:$nav-height; //height of nav div
  font-size:20px;
  line-height:$nav-height; //sets line height to same height of div to centre text vertically
  background:#ff5252;
  color:#fff;
  position:relative;
  margin-bottom:-$nav-height; //negative margin set to div height to stop the page jumping when the sticky fixed class is added
  z-index:3;
  text-transform:uppercase;
}

.content {
  width:640px;
  height:500vh;
  font-size:14px;
  padding-top:100px;
  margin:0 auto 0;
}

.sticky {
  position:fixed;
  top:0;
}

p {
  line-height:2;
}

var yourNavigation = $(".nav");
    stickyDiv = "sticky";
    yourHeader = $('.header').height();

$(window).scroll(function() {
  if( $(this).scrollTop() > yourHeader ) {
    yourNavigation.addClass(stickyDiv);
  } else {
    yourNavigation.removeClass(stickyDiv);
  }
});