title: Shopify | Debut theme static header bounce
body: <p>I'm editing the Debut theme on Shopify. I wanted to make the header static so I found this tutorial here: <a href="https://community.shopify.com/c/Shopify-Design/Sticky-Fixed-Header-and-Navigation-for-Debut-Theme/m-p/518018/highlight/true#M132407" rel="nofollow noreferrer">https://community.shopify.com/c/Shopify-Design/Sticky-Fixed-Header-and-Navigation-for-Debut-Theme/m-p/518018/highlight/true#M132407</a></p>
  
  <p>Everything is working as intended until after all the content is loaded, at which point it "bounces" in order to position the main content under the header. I tried to find the cause, and I realized that removing the <code>$(window).on("load", headerSize);</code>
  from the code below stops it, but does not reposition it.
  I have no clue how to use JavaScript and I assume I have to set a shorter animation or some kind of timer on the existing code in order to load the page instantly, or without the user noticing the bounce.</p>
  
  <p>JavaScript:</p>
  
  <pre><code>function headerSize() {
    var $headerHeight = $('div#shopify-section-header').outerHeight();
    $('#PageContainer').css('padding-top', $headerHeight);
  }
  
  $(window).on("load", headerSize);
  $(window).on("resize", $.debounce(500, headerSize));
  </code></pre>