FadeIn on Scroll (jQuery)

Used to answer a question on StackOverflow.

by Phil Button

HTML

<div>
  <div class="fade">Fade In 01</div>
  <div class="fade">Fade In 02</div>
  <div class="fade">Fade In 03</div>
  <div class="fade">Fade In 04</div>
  <div class="fade">Fade In 05</div>
  <div class="fade">Fade In 06</div>
  <div class="fade">Fade In 07</div>
  <div class="fade">Fade In 08</div>
  <div class="fade">Fade In 09</div>
  <div class="fade">Fade In 10</div>
</div>

CSS

.fade {
  margin: 50px;
  padding: 50px;
  background-color: lightgreen;
  opacity: 1;
}

JavaScript

$(window).scroll(function(){
		 $('.fade').each(function() {
     		var objectTop = $(this).offset().top;
        var objectBottom = $(this).offset().top + $(this).innerHeight();
        var windowTop = $(window).scrollTop();
        var windowBottom = $(window).scrollTop() + $(window).outerHeight();
        
     		if ( objectTop < windowTop && $(this).css("opacity") == 1 ) {
						$(this).fadeTo("slow", 0);
        }
     		if ( objectTop < windowTop && $(this).css("opacity") == 0 ) {
						$(this).fadeTo("slow", 1);
        }
     });
});