title: change static navbar to fixed on scroll when bottom of hero section is reached
body: <p>How can I make the static positioned navigation bar become fixed when the end of specific section is reached?</p>
  
  <p><a href="https://jsfiddle.net/zva77e73/46/" rel="nofollow noreferrer">Fiddle</a></p>
  
  <pre><code>$(document).on("scroll", function() {
      var navbar = $(".static-navbar");
      navbar.addClass("fixed-navbar");
  })
  </code></pre>
  
  <p>Im trying to make the navigation bar become fixed as soon as "red section" is reached.<br>
  With this jQuery code above, I managed to get it fixed as soon as the scroll event is fired, but that's not what I'm looking for.</p>