title: How to make div fade in/out on scroll
body: <p>Need some advice: I'm looking to create a fadeIn/fadeOut script that works responsively as the page scrolls. What I want to do:</p>
  
  <ul>
  <li>on scroll, once it gets to a hidden div, it fades in.</li>
  <li>once scroll reaches the top of the page, it fades out.</li>
  <li>any future scrolls have the div fade in and out, as it appears/disappears.</li>
  </ul>
  
  <p>Here's a sample code that creates the fadein, but only does it once. I need it to fade in and out each time it is triggered.</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>Any advice?</p>
  
  <p>Thanks, and I hope that made sense!</p>