title: jQuery: animate if else scroll function
body: <p>I have a scroll function set up so when the window scrolls beyond 50px, the <code>.header-wrap</code> div animates from a height of <code>140px</code> to <code>70px</code>, ideally what should happen then is when you scroll back less than 50px from the top, the <code>.header-wrap</code> div should animate back from <code>70px</code> to <code>140px</code> but this function doesn't seem to be working as it should:<br>
  jsFiddle: <a href="http://jsfiddle.net/ub8Rb/" rel="nofollow">http://jsfiddle.net/ub8Rb/</a> <br>
  <br>
  HTML:</p>
  
  <pre><code>&lt;div class="header-wrap"&gt;hello&lt;/div&gt;
  &lt;div class="scroll"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.header-wrap {
      position: fixed;
      width: 100%;
      height: 140px;
      top: 0;
      left: 0;
      text-align: center;
      background-color: #999;
      z-index: 9999;
  }
  .scroll {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4000px;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(document).scroll(function () {
      if (window.scrollY &gt; 50) {
          $(".header-wrap").animate({
              height: "70px"
          }, 500);
      } else {
          $(".header-wrap").animate({
              height: "140px"
          }, 500);
      }
  });
  </code></pre>
  
  <p>This function doesn't seem to be working as I've described above, and not animating the height of the div dependant on how far the window has scrolled. Any suggestions are greatly appreciated! </p>