title: JS/jQuery swap image on scroll event
body: <p>I've got a site menu that works pretty much like this: <a href="http://jsfiddle.net/sinky/XYGRW/" rel="nofollow">http://jsfiddle.net/sinky/XYGRW/</a> (found that here on stackoverflow)</p>
  
  <p>My question is that the designer wants the logo in the nav (home button), to be switch to a smaller icon. Not just scale down, but actually change image. Can I use the scroll event I'm already using for the other addClass commands to change the img src?</p>
  
  <pre><code>$(window).scroll(function () {
      if ($(document).scrollTop() == 0) {
          $('#header').removeClass('tiny');
          $('#menu-spacing').addClass('nav-margin-top');
      } else {
          $('#header').addClass('tiny');
          $('#menu-spacing').removeClass('nav-margin-top')
      }
  }); 
  
  
  HTML
  &lt;div id="header" class="header fixed"&gt;    
      &lt;div class="contain-to-grid"&gt;
              &lt;nav class="row top-bar"&gt;
                  &lt;ul class="title-area"&gt;
                      &lt;li&gt;&lt;img src="img/resolute_logo.png" width="195" height="103" alt=""/&gt;    &lt;/li&gt;
      &lt;li class="toggle-topbar menu-icon"&gt;&lt;a href="#"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;div id="menu-spacing" class="hide-for-medium-down nav-margin-top"&gt;
  </code></pre>