title: Dynamic scroll margin top value with a sticky header?
body: <p>I have a sticky header which changes the size (the logo becomes smaller) when the user scroll down the page, for example:</p>
  <ul>
  <li>header height with no scrolling: 200px</li>
  <li>header height with scrolling: 100px</li>
  </ul>
  <p>Below the header, there is a list of links which will jump to the respective position when a user click on them. I have added scroll-margin-top for smooth scrolling and to prevent the elements to be &quot;hidden&quot; behind the sticky header. The scroll-margin-top value is perfect when the page is not scrolled, meaning the header still has the original height. It doesn't look &quot;perfect&quot; anymore, as soon as the page is scrolled. The user will see a bit of text from the previous link. I assume this has something to do with the smaller header size.</p>
  <p>Does anyone has an idea how I can have a &quot;dynamic&quot; scroll-margin-top value based on the header size? Or is there any other way I can achieve a similar behaviour?</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>    // Sticky header on scroll
      //    async firstUpdated() {
      //     await this.updateComplete;
  
      //     window.addEventListener('scroll', this.checkSticky, { passive: true });
      //     window.addEventListener('resize', this.checkSticky);
      // }
  
      // disconnectedCallback() {
      //     window.removeEventListener('scroll', this.checkSticky);
      //     window.removeEventListener('resize', this.checkSticky);
      // }
  
      // checkSticky = async ({ type: eventType }) =&gt; {
      //     if (
      //         window.pageYOffset &gt; 0
      //         &amp;&amp; (!this.isSticky || eventType === 'resize')
      //     ) {
      //         this.isSticky = true;
  
      //         window.dispatchEvent(Header.eventIsSticky);
      //     } else if (
      //         window.pageYOffset &lt;= 0
      //         &amp;&amp; (this.isSticky || eventType === 'resize')
      //     ) {
      //         this.isSticky = false;
  
      //         window.dispatchEvent(Header.eventNotSticky);
      //     }
      // }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Scroll margin top
  body * {
    scroll-margin-top: 200px
   }
   */</code></pre>
  </div>
  </div>
  </p>
  <p>Thank you very much for your help!</p>