title: Add/remove class with jquery based on vertical scroll combined with fullPage.js?
body: <p>I'm trying to add/remove CSS classes (e.g. "clearHeader" and "darkHeader") with jQuery based on vertical scroll. That itself is very easy and works well, but when I try to combine that with fullPage.js (see <a href="http://alvarotrigo.com/fullPage" rel="nofollow">http://alvarotrigo.com/fullPage</a>) - it doesn't work.</p>
  
  <p>Script used:</p>
  
  <pre><code>//&lt;![CDATA[ 
      $(function() {
          var header = $("#fullpage");
          $(window).scroll(function() {    
              var scroll = $(window).scrollTop();
  
              if (scroll &gt;= 500) {
                  header.removeClass('clearHeader').addClass("darkHeader");
              } else {
                  header.removeClass("darkHeader").addClass('clearHeader');
              }
          });
      });        
  //]]&gt; 
  </code></pre>
  
  <p>See jsfiddles:</p>
  
  <ul>
  <li>only script: <a href="http://jsfiddle.net/ccn469og/11/" rel="nofollow">http://jsfiddle.net/ccn469og/11/</a></li>
  <li>only fullPage: <a href="http://jsfiddle.net/7s1yb1un/2/" rel="nofollow">http://jsfiddle.net/7s1yb1un/2/</a></li>
  <li>both: <a href="http://jsfiddle.net/84bywp2z/" rel="nofollow">http://jsfiddle.net/84bywp2z/</a></li>
  </ul>
  
  <p>Anyone had this issue before or knows of a workaround script that considers this type of irregular scrolling? (basically fullPage "toggles" between full-page sections accessible by pressing the down/up key or by a single mouse scroll).</p>