FadeIn on Scroll (jQuery)

Used to answer a question on StackOverflow.

by smombartz

HTML

<div>
  <div class="fade">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies, nulla et tempus egestas, lacus nisi congue nisl, ac euismod dolor mi nec dui. Aliquam.</div>
  <div class="fade">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies, nulla et tempus egestas, lacus nisi congue nisl, ac euismod dolor mi nec dui. Aliquam.</div>
  <div class="fade">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies, nulla et tempus egestas, lacus nisi congue nisl, ac euismod dolor mi nec dui. Aliquam.</div>
  <div class="fade">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies, nulla et tempus egestas, lacus nisi congue nisl, ac euismod dolor mi nec dui. Aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies, nulla et tempus egestas, lacus nisi congue nisl, ac euismod dolor mi nec dui. Aliquam.</div>
  <div class="fade">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies, nulla et tempus egestas, lacus nisi congue nisl, ac euismod dolor mi nec dui. Aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies, nulla et tempus egestas, lacus nisi congue nisl, ac euismod dolor mi nec dui. Aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies, nulla et tempus egestas, lacus nisi congue nisl, ac euismod dolor mi nec dui. Aliquam.</div>
  <div class="fade">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies, nulla et tempus egestas, lacus nisi congue nisl, ac euismod dolor mi nec dui. Aliquam.</div>
  <div class="fade">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies, nulla et tempus egestas, lacus nisi congue nisl, ac euismod dolor mi nec dui. Aliquam.</div>
  <div class="fade">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies, nulla et tempus egestas, lacus nisi congue nisl, ac euismod dolor mi nec dui. Aliquam.</div>
  <div...

CSS

html {
  margin-top: 80px;
}
.fade {
  margin: 0 50px 0;
  padding: 10px;
  background-color: none;
  opacity: 1;
}

JavaScript

$(window).on("load",function() {
  $(window).scroll(function() {
    var windowBottom = $(this).scrollTop() + $(this).innerHeight();
    $(".fade").each(function() {
      /* Check the location of each desired element */
      var objectBottom = $(this).offset().top + $(this).outerHeight();
      
      /* If the element is completely within bounds of the window, fade it in */
      if (objectBottom < windowBottom) { //object comes into view (scrolling down)
        if ($(this).css("opacity")==0) {$(this).fadeTo(200,1);}
      } else { //object goes out of view (scrolling up)
        if ($(this).css("opacity")==1) {$(this).fadeTo(200,0);}
      }
    });
  }).scroll(); //invoke scroll-handler on page-load
});