title: addClass removeClass not working
body: <p>My first time asking question here.
  I searched through questions but I couldn't find similar problems.</p>
  
  <p>I'm building a corporate website with bootstrap3 on Brackets. I check to see if things work on latest version of chrome and safari.</p>
  
  <p>I'm trying to make my navbar shrink its height and change background color using JQuery addClass and removeClass, but it seems to be not working at all.
  When I change CSS property via JQuery, it works. I can change the background color.
  So I tried to change multiple CSS properties via Jquery, it wouldn't work. It only allows me to change background color.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $(window).scroll(function() {
      if ($(window).scrollTop() &gt; 50) {
        $("#top-bar").addClass('animated-header');
      } else {
        $("#top-bar").removeClass('animated-header');
      }
    });
  
    $("#clients-logo").owlCarousel({
      itemsCustom: false,
      pagination: false,
      items: 5,
      autoplay: true,
    })
  
  }); //this is the part doesn't work
  
  $(document).ready(function() {
    $(window).scroll(function() {
      if ($(window).scrollTop() &gt; 50) {
        $("#top-bar").css("background-color", "#ef7c7c");
      } else {
        $("#top-bar").css("background-color", "transparent");
      }
    });
  
    $("#clients-logo").owlCarousel({
      itemsCustom: false,
      pagination: false,
      items: 5,
      autoplay: true,
    })
  }); //this part works perfectly</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#top-bar {
    background: transparent;
    color: #fff;
    -webkit-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
    padding: 30px 0;
    height: 15%;
  }
  #top-bar .animated-header {
    /*Background Color of nav bar when scrolled*/
    background-color: #ef7c7c;
    padding: 10px 0;
    height: 10%;
    -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header id="top-bar" class="navbar-fixed-top animated-header"&gt;
    &lt;div class="container"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you very much for your help!</p>