title: Add transition to centered navbar icon/logo/image on scrolldown
body: <p>I've made a simple Navbar that's fixed to the top. 
  Originally when at the top, I would like the logo to be slightly larger, then on scroll down make it transition itself into the navbar.</p>
  
  <p>When scrolling back to the top I would like the logo to come back out.</p>
  
  <p>Any help or tips greatly appreciated!</p>
  
  <p><a href="http://i.stack.imgur.com/Kfy8p.png" rel="nofollow">Not scrolled</a></p>
  
  <p><a href="http://i.stack.imgur.com/ySYn2.png" rel="nofollow">Scrolled down</a></p>
  
  <p>Here's a codepen of what I have so far; the logo is oval shaped so I used batman as an example:</p>
  
  <p><a href="http://codepen.io/anon/pen/NRzWXk" rel="nofollow">http://codepen.io/anon/pen/NRzWXk</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;nav&gt;
    &lt;div id="nav_wrapper"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;One&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Two&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Three&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;img src="http://vignette1.wikia.nocookie.net/marvel_dc/images/c/ca/Batman_logo.png/revision/latest?cb=20140312205908" height="50px" width="60px"&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Four&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Five&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Six&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>html, body {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
      background-color: #d7d2c4;
  }
  
  nav {
      background-color: #704e46;
      top: 0;
      position: fixed;
      width: 100%;
  
  }
  
  #nav_wrapper {
      text-align: center;
  }
  
  nav ul {
      margin: 0;
      padding: 0;
  }
  
  nav ul li {
      list-style-type: none;
      display: inline-block;
      padding: 15px;
      -webkit-transition: background-color 0.5s; /* Safari */
      transition: background-color 0.5s;
  }
  
  nav ul li a {
      text-decoration: none;
      color: white;
      -webkit-transition: background-color 0.5s; /* Safari */
      transition: background-color 0.5s;
  }
  
  nav ul li:hover {
      background-color: #5d4037;
      cursor: pointer;
  }
  
  nav ul li:hover a{
      color: whitesmoke;   
  }
  </code></pre>