title: Slide div in and out of viewport
body: <p>I'm trying to achieve an effect similar to airbnb.com's home page and the how it works button.</p>
  
  <p>I've been able to do the following fiddle: <a href="http://jsfiddle.net/n89z4bz3/" rel="nofollow">http://jsfiddle.net/n89z4bz3/</a></p>
  
  <p>However, I'm unable to achieve the slide effect as well as fixing the visible container to the bottom of the slid in <code>upper-container</code>.</p>
  
  <p>My Jquery code is here:</p>
  
  <pre><code>$(document).ready(function(){
      var heightVar = 0 - $(window).height();
      $('.upper-container').css('top',heightVar+'px');
      $('.main-container').css('height', $(window).height()+'px');
      $('.click-this').on('click', function(){
          $('.upper-container').css('top', '0');
          $('.main-container').css('margin-top',$('.upper-container').height()+'px');
      });
  });
  </code></pre>
  
  <p>My HTML is setup as follows:</p>
  
  <pre><code>&lt;div class="upper-container"&gt;
      Hidden container
  &lt;/div&gt;
  &lt;div class="main-container"&gt;
      Visibile container
      &lt;div class="click-this"&gt;
          Click This to Slide Down
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>