title: .addClass on initially loaded element
body: <p><strong>Situation:</strong>
  I have written a function that detects whether <code>&lt;section&gt;</code> has entered the viewport via scroll, if so <code>.addClass('fadeInUp')</code> else <code>.removeClass('fadeInUp')</code> causing the <code>.animation-element</code> to fade in on the viewport.</p>
  
  <p><strong>Problem:</strong> Because the conditional is binded to the scroll function, the 1st <code>&lt;section&gt;</code> that is initially loaded does not <code>.addClass('fadeInUp')</code> until the user scrolls past then scrolls back to the <code>&lt;section&gt;</code>. <em><a href="https://jsfiddle.net/WeebleWobb/wcw5jpse/9/" rel="nofollow noreferrer">View JS Fiddle for example</a></em></p>
  
  <p><strong>Question:</strong> How can I also detect if the initially loaded <code>&lt;section&gt;</code> is in the viewport, then <code>.addClass('fadeInUp')</code>, etc...</p>
  
  <p><strong>Current JS function:</strong></p>
  
  <pre><code>function isScrolledIntoView(elem) {
      var docViewTop = $(window).scrollTop();
      var docViewBottom = docViewTop + $(window).height();
  
      var elemTop = $(elem).offset().top;
      var elemBottom = elemTop + $(elem).height();
  
      return ((elemBottom &lt;= docViewBottom) &amp;&amp; (elemTop &gt;= docViewTop));
  }
  
  $(window).scroll(function() {
      $('.animation-element').each(function() {
          if (isScrolledIntoView(this) === true) {
              $(this).addClass('fadeInUp')
          } else {
              $(this).removeClass('fadeInUp')
          }
      });
  });
  </code></pre>
  
  <p><strong>Here is the <a href="https://jsfiddle.net/WeebleWobb/wcw5jpse/9/" rel="nofollow noreferrer">JS Fiddle</a> of the prototype.</strong></p>