title: Jquery navbar animation not working properly
body: <p>I looked through this website for similar question, but couldn't find any.</p>
  
  <p>So I've been working on a website with bootstrap3 for a little bit now and most of the formatting/design part is done, but have one problem I can't solve myself.
  I added Jquery to make the navbar shrinks and changes background color when users scroll down to a certain point.(Thanks to peeps helped me out here)
  It kind of works, but the movement of it is really weird.
  When load the page, the navbar is already shrunk and background is colored, but when scrolled a little bit it blows up in size and the background disappears, and when scrolled even more to the point where I set Jquery to start working, navbar shrinks back and background color changes again.
  It's hard to explain in writing, so please see the website and see what I'm talking about.
  Below is the website I'm working on.</p>
  
  <p>Test website</p>
  
  <p>I'm assuming its the Jquery not working when loaded, so the CSS setting supposed to be hidden(shorter navbar height and background color) isn't hidden initially.</p>
  
  <p>Below is the jquery code:</p>
  
  <pre><code>$(document).ready(function(){
  $(window).scroll(function () {
      if ($(window).scrollTop() &gt; 70) {
          $("#top-bar").addClass('animated-header');
      } else {
          $("#top-bar").removeClass('animated-header');        }
  });
  
  $("#clients-logo").owlCarousel({
  
      itemsCustom : false,
      pagination : false,
      items : 5,
      autoplay: true,
    })
  
  });
  </code></pre>
  
  <p>Thanks for the help in advance!</p>