title: Using Waypoints to fade in div when in view while fade out remaining divs when scrolling
body: <p>Was wondering if you guys can point me in the right direction, my brain's a bit fried at the moment from pulling an all-nighter.</p>
  
  <p>I'm trying to achieve what should be a relatively easy task using the Waypoints plugin that adds a class to a div when in view that switches it to full opacity. When the user continues to scroll down (or up), that class is faded out by removing the class which is then applied to the next div in view. </p>
  
  <p>I found a site that achieves the desired effect I'm looking for here:
  <a href="http://www.araujoestate.com/pages/the-land.html" rel="nofollow">http://www.araujoestate.com/pages/the-land.html</a></p>
  
  <p>I believe the answer lies in the "Above" and "Below" callbacks?</p>
  
  <p>Thanks for any input on this one. </p>
  
  <p><strong>UPDATED</strong></p>
  
  <p>I developed the following JSFiddle:
  <br><a href="http://jsfiddle.net/nbgdzspy/2/" rel="nofollow">http://jsfiddle.net/nbgdzspy/2/</a></p>
  
  <p>I'm producing the desired effect I was looking for, but was wondering if there's a more cleaner way to approach the code... Seems rather clunky.</p>
  
  <pre><code>$('#test1').waypoint(function(direction) {
      if (direction === 'down') {
          $(this).addClass("waypoint-here");
      }
  }, {
      offset: '50%'
  }).waypoint(function(direction) {
      if (direction === 'up') {
          $(this).addClass("waypoint-here");
          $("#test2").removeClass("waypoint-here");
      }
  }, {
      offset: '25%'
  });
  
  $('#test2').waypoint(function(direction) {
      if (direction === 'down') {
          $("#test1").removeClass("waypoint-here");
          $(this).addClass("waypoint-here");
      }
  }, {
      offset: '50%'
  }).waypoint(function(direction) {
      if (direction === 'up') {
          $(this).addClass("waypoint-here");
          $("#test3").removeClass("waypoint-here");
      }
  }, {
      offset: '25%'
  });
  </code></pre>