title: How would I resize an image while scrolling down on a page?
body: <p>I am creating a nav bar for a website, however I can't seem to get this to work. I want the logo to shrink as you scroll down on the site. I've tried the webkit animation stuff, and a few javascript/jQuery functions but they don't want to cooperate. This is the current function i've played with and it doesn't seem to like it. How do I fix it?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
          &lt;script&gt;
              $(document).on("scroll", function() {
              if($(document).scrollTop() &gt;= 1)
              {
                  $(".nav .logo img").css('-webkit-transform', 'scale(.5, .5');
                  $(".nav .logo img").css('-ms-transform', 'scale(.5, .5');
                  $(".nav .logo img").css('transform', 'scale(.5, .5');
              }
              else 
              {
                  $(".nav .logo img").css('-webkit-transform', 'scale(1, 1');
                  $(".nav .logo img").css('-ms-transform', 'scale(1, 1');
                  $(".nav .logo img").css('transform', 'scale(1, 1');
              }
          });​
          &lt;/script&gt;
          &lt;div class="nav"&gt;
              &lt;div class = "logo"&gt;
                  &lt;a href = "index.html"&gt;&lt;img src="Pics/siren.png" alt="" width="196" height="196"/&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.nav{
      position: fixed;       
      top: 0;
      z-index: 1;
      width: 100%;
      height: 100px;
  }
  .nav .logo{
      position: fixed;
      text-align: left;
      z-index: 2;
      top: 0;
      bottom: 100px;
      overflow: hidden;
      opacity: .5;
  }
  </code></pre>