title: jQuery - slide div into screen
body: <p>I have a div that I am trying to slide into the screen when the user scrolls to a specific point on the page.</p>
  
  <p>I don't want to use scrollDown / scrollUp because it "draws" as it appears.</p>
  
  <p>I need something where the whole div is already populated off screen and then slides into the screen.</p>
  
  <p>I am looking for something along the lines of this: 
  <a href="http://www.invisionapp.com/?utm_source=LandBook2&amp;utm_medium=banner&amp;utm_campaign=Product" rel="nofollow">http://www.invisionapp.com/?utm_source=LandBook2&amp;utm_medium=banner&amp;utm_campaign=Product</a></p>
  
  <p>I tried using .animate but it has a very delayed response (like 1+ minutes)</p>
  
  <p>My code:</p>
  
  <p>jQuery:</p>
  
  <pre><code>$(window).scroll(function() {
      if ($(document).scrollTop() &gt; 725) {
  
          $('#topHeaderColor').animate({top: 0}, 500);
      }
      else {
          $('#topHeaderColor').animate({top: -150}, 500);
      }
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>     &lt;div id="topHeaderColor"&gt;
       // Images and other Divs here
       &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code> #topHeaderColor {
       left: 0;
       position: fixed;
       width: 100%;
       z-index: 5;
       background-color: green;
       top: -150px;
       height: 150px;
   }
  </code></pre>