title: JQuery fadeIn() when element comes into viewport
body: <p>I would like to fadeIn() different elements as soon as they come into viewport view, when scrolling down a page.</p>
  
  <p>My code however fades in all DIVs (that have the ".fadethis" class) at once, instead of only when that specific element comes into view:</p>
  
  <pre><code>$(window).scroll(function() {
    $(".fadethis").each(function() {
    var top_of_element = $(this).offset().top;
    var bottom_of_element = $(this).offset().top + $(this).outerHeight();
    var bottom_of_screen = $(window).scrollTop() + window.innerHeight;
    var top_of_screen = $(window).scrollTop();
  
    if((bottom_of_screen &gt; top_of_element) &amp;&amp; (top_of_screen &lt; bottom_of_element)){
     $(this).fadeIn(10000);
    }
  
   });
  });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.fadethis{
  display:none;
  }
  </code></pre>