title: Dynamically making an element fixed (header) in fullpage.js
body: <p>I'm building a page in <a href="https://github.com/alvarotrigo/fullPage.js" rel="nofollow noreferrer">fullpage.js</a>. On the first slide is an image that consumes 90% of the height of the viewport. The other 10% is a navigation bar at the below the image. The image below demonstrates it.</p>
  
  <p><img src="https://i.stack.imgur.com/SRzxf.png" alt="enter image description here"></p>
  
  <p>As I scroll to the next slide, I want the navigation bar to become a fixed header for the remainder of the slides. </p>
  
  <p>I tried making the element fixed once it's <code>offset().top</code> value is 0 against <code>$(window).top()</code> using jQuery. This did not work for me.</p>
  
  <pre><code>$(window).scroll(function () {
      var nav = $('#nav');
  
      var eTop = nav.offset().top;
      if ((eTop - $(window).scrollTop()) == 0) {
          nav.addClass('fixed');
      }
      else {
          nav.removeClass('fixed');
      }
  });
  </code></pre>
  
  <p>Is this possible and how do I achieve it? </p>