title: waypoint addClass and remove class of a "fixed" element works when going down but doesn't going up
body: <p>I'm working on a website with a parallax effect using Stellar:
  <em><a href="http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/" rel="nofollow">http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/</a></em></p>
  
  <p>I've got a "fixed" div with a class at the center of the page.
  When I scroll down or up the class changes depending on the slide that is "active".</p>
  
  <p>I'm using waypoint and everything works just fine when I'm scrolling down the page.
  But when I scroll up, instead of changing the class, they are all put one after an other, the order is shifted and the class doesn't match the right slide.</p>
  
  <p>Here is the HTML
  (#square is the fixed div):</p>
  
  <pre><code>&lt;body&gt;
  
  &lt;ul class="navigation"&gt;
  &lt;li id="un"     data-slide="1"&gt;Slide 1&lt;/li&gt;
  &lt;li id="deux"   data-slide="2"&gt;Slide 2&lt;/li&gt;
  &lt;li id="trois"  data-slide="3"&gt;Slide 3&lt;/li&gt;
  &lt;li id="quatre" data-slide="4"&gt;Slide 4&lt;/li&gt;
  &lt;li id="cinq"   data-slide="5"&gt;Slide 5&lt;/li&gt;
  &lt;li id="six"    data-slide="6"&gt;Slide 6&lt;/li&gt;
  &lt;li id="sept"   data-slide="7"&gt;Slide 7&lt;/li&gt;
  &lt;li id="huit"   data-slide="8"&gt;Slide 8&lt;/li&gt;
  &lt;li id="neuf"   data-slide="9"&gt;Slide 9&lt;/li&gt;
  &lt;li id="dix"    data-slide="10"&gt;Slide 10&lt;/li&gt;
  &lt;li id="onze"   data-slide="11"&gt;Slide 11&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div id="square" class="trans1"&gt;&lt;/div&gt;
  
  &lt;div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5"&gt;
  &lt;a class="button" data-slide="2" title=""&gt;&lt;/a&gt;
  
  &lt;/div&gt;&lt;!--End Slide 1--&gt;
  
  &lt;div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5"&gt;
  
     &lt;div class="wrapper"&gt;
        &lt;img src="images/slide2/blur-ball.png" data-stellar-ratio="3" data-stellar-vertical-offset="-55"alt=""&gt;
        &lt;img src="images/slide2/blur-ball-big.png" data-stellar-ratio="1" data-stellar-vertical-offset="-102"alt=""&gt;
     &lt;/div&gt;
  
     &lt;span class="slideno"&gt;Slide 2&lt;/span&gt;
     &lt;a class="button" data-slide="3" title=""&gt;&lt;/a&gt;
  
  &lt;/div&gt;&lt;!--End Slide 2--&gt;
  
  
  &lt;div class="slide" id="slide3" data-slide="3" data-stellar-background-ratio="0.5"&gt;
     &lt;div class="wrapper"&gt;
     &lt;img src="images/slide3/freelance.png" data-stellar-ratio="1.4" data-stellar-vertical-offset="-102"alt=""&gt;
     &lt;img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-53"alt=""&gt;
     &lt;img src="images/slide3/rockable.png" data-stellar-ratio="2.7" data-stellar-vertical-offset="-200"alt=""&gt;
     &lt;img src="images/slide3/themeforest.png" data-stellar-ratio="3" data-stellar-vertical-offset="-200"alt=""&gt;
     &lt;img src="images/slide3/tutshub.png" data-stellar-ratio="1" data-stellar-vertical-offset="-200"alt=""&gt;
     &lt;img src="images/slide3/psdtuts.png" data-stellar-ratio="1.5" data-stellar-vertical-offset="-200"alt=""&gt;
     &lt;/div&gt;
  
     &lt;span class="slideno"&gt;Slide 3&lt;/span&gt;
     &lt;a class="button" data-slide="4" title=""&gt;&lt;/a&gt;
  
  &lt;/div&gt;&lt;!--End Slide 3--&gt;
  
  &lt;div class="slide" id="slide4" data-slide="4" data-stellar-background-ratio="0"&gt;
  
     &lt;span class="slideno"&gt;Slide 4&lt;/span&gt;
     &lt;span class="parallaxbg"&gt;Use the parallax effects on background images too!&lt;/span&gt;
  
  &lt;/div&gt;&lt;!--End Slide 4--&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>And here is the javascript</p>
  
  <pre><code>//1st SLIDE
      $('#square').waypoint(function(direction) {
          if (direction === 'down') {
          $('#square').toggleClass('trans1');
      }
      else {
          $('#square').toggleClass('trans1');
      }
      });
  
      // 2nd slide
      $('#slide2').waypoint(function(direction) {
          if (direction === 'down') {
          $('#square').toggleClass('trans2'), $('#square').removeClass('trans1');
      }
      else {
          $('#square').toggleClass('trans2'), $('#square').removeClass('trans1');
      }
      }, { offset: '50%' });
  
          $('#slide2').waypoint(function(direction) {
              if (direction === 'up') {
              $('#square').toggleClass('trans1'),$('#square').removeClass('trans2');
          }
          });
  
     //3rd slide
     $('#slide3').waypoint(function(direction) {
          if (direction === 'down') {
          $('#square').toggleClass('trans3'),$('#square').removeClass('trans2');
      }
      else {
          $('#square').toggleClass('trans3'),$('#square').removeClass('trans2');
      }}, { offset: '50%' });
  
          $('#slide3').waypoint(function(direction) {
                  if (direction === 'up') {
              $('#square').toggleClass('trans2'),$('#square').removeClass('trans3');
              }
          });
  
      //4th slide
      $('#slide4').waypoint(function(direction) {
          if (direction === 'down') {
          $('#square').toggleClass('trans4'),$('#square').removeClass('trans3');
      }
      else {
          $('#square').toggleClass('trans4'),$('#square').removeClass('trans3');
      }}, { offset: '50%' });
  
          $('#slide4').waypoint(function(direction) {
                  if (direction === 'up') {
              $('#square').toggleClass('trans3'),$('#square').removeClass('trans4');
              }
          });
  </code></pre>
  
  <p>Here's a link to the website : <a href="http://ambuscade.ca/DEV2/" rel="nofollow">http://ambuscade.ca/DEV2/</a></p>
  
  <p>thanks</p>