title: Adding class to div when inside viewport
body: <p>I'm trying to make a div element get an additional class added to it when it's inside the viewport. To achieve this I'm using a minified JQuery 1.11.0.</p>
  
  <p>This is my JQuery code:</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 () {
      $('.textbox').each(function () {
          if (isScrolledIntoView(this) === true) {
              $(this).addClass('visible');
          }
      });
  
  });
  </code></pre>
  
  <p>I'm sure my class is visible but it's not adding the <code>visible</code> class for some reason. Any ideas why?
  The CSS of my two affected classes are as follows:</p>
  
  <pre><code>.textbox {
      width: 70%;
      margin: 0 auto;
      opacity: 0;
      transition: all .5s;
      top: -10px;
      position: relative;
  }
  .textbox .visible {
      opacity: 1;
      top: 0;
  }
  </code></pre>