title: Animate Header based on different scroll positions
body: <p>Currently I have a header that animates (squishes) to a smaller version with different logo and different nav after scrolling a certain amount of pixels.  If the user scrolls back up past that pixel amount (170 in this case), the header expands back to its normal state.  Now (because there are some very long pages on the site) my client wants the header to 'expand' any time the the user is scrolling in up.  I think I am getting close, but the events are firing a zillion times when I begin to scroll up the page. Here is my current javascript:</p>
  
  <pre><code>function squishHeader() {
      compactHeader = true;
      header.animate({height: '48px'}, 500);
      mainNav.fadeOut("fast");
      logo.fadeOut("fast");
      scrollLogo.delay(300).slideDown("fast");
      if (overlayIsVisible == true) {
          overlay.fadeOut("slow");
          overlayIsVisible = false;
      }
  }
  
  function expandHeader() {
      compactHeader = false;
      header.animate({height: '130px'}, 100);
      scrollLogo.css("display", "none");
      logo.fadeIn("slow");
      mainNav.delay(300).fadeIn("fast");
  }
  
  
  var compactHeader = false;
  var lastScrollTop = 0;
  $(window).on('scroll', function() {
  
      if (win.width() &gt; 1024) {
      scrollPosition = $(this).scrollTop();
          if (scrollPosition &gt;= 170 &amp;&amp; !compactHeader) {
              squishHeader();
          }
          else if (scrollPosition &lt; 170 &amp;&amp; compactHeader) {
              expandHeader();
          }
          else if ( scrollPosition &lt; lastScrollTop &amp;&amp; compactHeader){
              expandHeader();
          }
          lastScrollTop = scrollPosition;
      }
  });
  </code></pre>
  
  <p>Can someone please help me with this, it's driving me crazy!  Thanks in advance</p>