title: Fade In on Scroll Down, Fade Out on Scroll Up - based on element position in window
body: <p>I'm trying to get a series of elements to fade in on scroll down when they are fully visible in the window. If I keep scrolling down, I do not want them to fade out, but if I scroll up, I do want them to fade out.</p>
  
  <p>This is the closest jsfiddle I've found.
  <a href="http://jsfiddle.net/tcloninger/e5qaD/" rel="noreferrer">http://jsfiddle.net/tcloninger/e5qaD/</a></p>
  
  <pre><code>$(document).ready(function() {
  
  /* Every time the window is scrolled ... */
  $(window).scroll( function(){
  
      /* Check the location of each desired element */
      $('.hideme').each( function(i){
  
          var bottom_of_object = $(this).position().top + $(this).outerHeight();
          var bottom_of_window = $(window).scrollTop() + $(window).height();
  
          /* If the object is completely visible in the window, fade it it */
          if( bottom_of_window &gt; bottom_of_object ){
  
              $(this).animate({'opacity':'1'},500);
  
          }    
      }); 
  }); 
  });
  </code></pre>
  
  <p>It does exactly what I want on scroll down, but I also want the elements to fade out if I scroll up past them.</p>
  
  <p>I tried this with no luck.</p>
  
  <pre><code>            if( bottom_of_window &gt; bottom_of_object ){
  
                  $(this).animate({'opacity':'1'},500);  
  
              } else {
  
                 $(this).animate({'opacity':'0'},500); }
  </code></pre>
  
  <p>Thanks so much for taking the time to look at this.</p>