title: Sticky header transition becomes jumpy and ugly when scrolling down
body: <p>Check the frontpage of <a href="https://www.belkita.com" rel="nofollow noreferrer">https://www.belkita.com</a> . If you scroll down slowly you can check how to at certain point it becomes jumpy and ugly when it should be as smooth transition to a smaller header.</p>
  
  <p>The javascript code I'm using is:</p>
  
  <pre><code>&lt;script&gt;
  // When the user scrolls down 50px from the top of the document, resize the header's font size
  window.onscroll = function() {scrollFunction()};
  
  
  function scrollFunction() {
    if (document.body.scrollTop &gt; 50 || document.documentElement.scrollTop &gt; 50) {
          document.getElementById("header-sidebar").style.display = "none";
          document.getElementById("masthead").style.height = "80px";
      document.getElementsByClassName("custom-logo")[0].style.maxWidth = "130px";
  
    } else {
          document.getElementById("header-sidebar").style.display = "block";
          document.getElementById("masthead").style.height = "140px";
        document.getElementsByClassName("custom-logo")[0].style.maxWidth = "230px";
    }
  }
  &lt;/script&gt;
  </code></pre>