title: Make Logo Shrink into Navbar on scroll
body: <p>I have a div whose height is bigger (120px vs the 75px navbar) than the navbar. Whenever someone starts scrolling I want the logo to transition to the same height as the navbar. I'm trying to toggle a CSS class with no luck, what am I overlooking? I'm using a Bootstrap navbar. </p>
  
  <p>Here is the HTML for the fixed nav:</p>
  
  <pre><code>&lt;div class="navbar-header"&gt;
      &lt;button class="navbar-toggle btn btn-default" data-toggle="collapse" type="button"&gt;
         &lt;span class="icon-bar"&gt;&lt;/span&gt;
         &lt;span class="icon-bar"&gt;&lt;/span&gt;
         &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;/button&gt;
        &lt;a href="/" class="navbar-brand"&gt;
          &lt;div id="floating-logo"&gt;Logo&lt;/div&gt;
        &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here are the CSS classes:</p>
  
  <pre><code>#floating-logo {
      margin: -15px 50px 0 0;
      background-color: #FF9009;
      height: 120px;
      color: #FFF;
      line-height: 120px;
      width: 190px;
      text-align: center;
      padding: 0 7px;
  }
  
  .tiny{
      height: 75px;
  }
  </code></pre>
  
  <p>Here is the jquery:</p>
  
  <pre><code>$(window).on("scroll touchmove", function () {
      $('#floating-logo').toggleClass('tiny', $(document).scrollTop() &gt; 0);
  });
  </code></pre>
  
  <p>I've even included a jsfiddle: <a href="https://jsfiddle.net/jkjmr6/2f4ofnsn/" rel="nofollow">https://jsfiddle.net/jkjmr6/2f4ofnsn/</a></p>