title: Smooth scroll header with fixed position
body: <p>How to create smooth scroll when I change the position to fixed. I try to add the animation but it does not work. Better use jquery animation();</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(window).scroll(function() {
    var sticky = $('.mobile-menu'),
      scroll = $(window).scrollTop();
  
    if (scroll &gt;= 40) sticky.addClass('fixed');
    else sticky.removeClass('fixed');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>header {
    padding: 20px 40px;
    background: gray;
    width: 100%;
    -webkit-transition: position 10s;
    -moz-transition: position 10s;
    -ms-transition: position 10s;
    -o-transition: position 10s;
    transition: position 10s;
  }
  section {
    height: 150vh;
  }
  .fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;header class="mobile-menu"&gt;Text here&lt;/header&gt;
  &lt;section&gt;Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake
    gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.&lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>