title: Fixed header shaking when scrolling down
body: <p>When I use a <code>fixed</code> header, it's shaking when adding my <code>is-sticky</code>
  CSS class. It's starting with <code>top:0;</code> for it's animation when scrolling down. I want it to stay fixed smoothly on top in a way that will not cause noticeable jitter. For Example: <a href="http://www.lazada.com.my/" rel="nofollow noreferrer">http://www.lazada.com.my/</a><br />
  Here is my <a href="http://jsfiddle.net/lemonkazi/ovvfxg4w/" rel="nofollow noreferrer">demo</a>.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(window).load(function(){
    $(window).scroll(function(){
      if($(window).scrollTop()&gt;0){
        if( ! ($('#scroller').hasClass('is-sticky'))) {
          $('#scroller')
          .addClass('is-sticky')
          .css('top',9)
          .animate({
            'top': 84
          },'1000');
        }
  
  
  
      } else {
        if($('#scroller').hasClass('is-sticky')) {
          $('#scroller')
          .removeClass('is-sticky')
          .css('top',9)
          .animate({
            'top':84
          },1000);
  
        }
      }
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
      height:1000px;
      margin:0;
      padding:0;
      position:relative;
  }
  #scroller {
      position: absolute;
      left: 0;
      top: 84px;
      width: 100%;
      z-index: 30;
      background:#CCC;
      height:20px;
  }
  #scroller.is-sticky {
      position: fixed;
      width: 100%;
      left: 0;
      top: 9px;
      margin-top: -31px;
      height: 53px;
      z-index: 701;
      background: #CCC;
      opacity: .97;
      filter: alpha(opacity = 97);
      -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
      -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;body&gt;
    &lt;div id="scroller"&gt;Some controls&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>