title: Scroll down transformation and logo movement
body: <p>What would be the best way to achieve the following:</p>
  
  <p>I would like to get a big centered logo, to shrink and move to the <code>top left</code> of the page as you scroll down and become part of the <code>nav bar</code>.
  I would also like a <code>nav bar</code> to fade down from the top.(I only know how to do this timed not dependent on scroll) </p>
  
  <p>When the site loads it will look like just a logo with a simple background. When you scroll down the logo will shift to the <code>top left</code> and the <code>nav bar</code> will ease in and the background picture will also move up out of sight.</p>
  
  <p>Is there any way that you can do the transformation dependent on how far you have scrolled. So that if you stop half way your transformation will also stop?</p>