title: Fade In div when it's scrolled into viewport
body: <p>Okay, so I've been searching for a <em>simple</em> way to fade in a div when a user scrolls it into view, but I can't find a straight solution.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
  
  &lt;div class="topdiv"&gt;This is a 100% height div. User scrolls down from here.&lt;/div&gt;
  
  &lt;div class="fadethisdiv"&gt;This content should be faded in 
  once .fadethisdiv is [so many]px into the bottom of the viewport.
  Let's use 150px as an example.&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><br />
  <strong>CSS</strong></p>
  
  <pre><code>.container {
         width:100%;
         height:600px;
  }
  
  .topdiv {
         height:100%;
         background-color:#09f;
         text-align:center;
         font-size:24px;
  }
  
  .fadethisdiv {
         height:100%;
         background-color:#36afff;
         text-align:center;
         font-size:24px;
  }
  </code></pre>
  
  <p><br />
  <strong>JS</strong></p>
  
  <pre><code>// Talk to me.
  </code></pre>
  
  <p>Here's a fiddle: <a href="http://jsfiddle.net/kz2z5/2/" rel="noreferrer">http://jsfiddle.net/kz2z5/2/</a></p>