title: Bootstrap animated navbar with different sized logos
body: <p>I'm trying to animate a bootstrap navbar. When the page loads you see the full size logo and when you scroll down the navbar decreases in size and a smaller logo fades in. Got that far but i'm having trouble with a glitch that can end up with both the logos being in view if you scroll down a little and then quickly scroll back up. So i'm looking for a best way to make sure there is only one logo at any given time. here's my jQuery:</p>
  
  <pre><code>var header_closed = false;
  var header_open = true;
  var timer;
  
  $(window).scroll(function() {
      if (timer) {
          window.clearTimeout(timer);
      }
      timer = window.setTimeout(function() {
          if ($(document).scrollTop() &gt; 20 &amp;&amp; header_closed === false) {
              header_closed = true;
              header_open = false;
              $('.biglogo').fadeOut("fast", function() {
                  $('.navbar-header').animate({
                      height: "54px"
                  }, 250, function() {
                      $('.smllogo').fadeIn(500);
  
                  });
              });
  
  
          } else if ($(document).scrollTop() &lt; 20 &amp;&amp; header_open === false) {
              header_open = true;
              header_closed = false;
              $('.smllogo').fadeOut(500, function() {
                  $('.navbar-header').animate({
                      height: "138px"
                  }, 250, function() {
                      $('.biglogo').fadeIn('fast');
                  });
              });
          }
      }, 200);
  });
  </code></pre>
  
  <p>The html is just a normal bootstrap fixed navbar with two navbar-brands (the small logo has a display: hidden; to hide it from view on load.. any ideas?</p>