title: Fix absolutely positioned element to top of viewport on scroll
body: <p>I'm trying to combine the best of both worlds and accomplish what fixed positioning does when you set <code>top: 0</code> (appends to top of viewport) while keeping the element absolutely positioned so it scrolls horizontally with its parent element (doing this with fixed is problematic).</p>
  
  <p>The catch is this is a table header so trying to hack my way through this with nested <code>divs</code> set to different positioning methods won't work here.</p>
  
  <p>What I currently tried was keeping the table header with a position of <code>absolute</code> while calculating the distance of the top of the table from the top of the viewport within a scroll event listener:</p>
  
  <pre><code>const distanceToTop = this.headerElement.getBoundingClientRect().top;
  this.stickyHeaderElement.style.top = `${Math.abs(distanceToTop)}px`;
  </code></pre>
  
  <p><code>this.headerElement</code> is the original table header that you can scroll past (does nothing) while the stickyHeader instance is where the smoke &amp; mirrors occurs. </p>
  
  <p>This current method is doing what I want it to... <em>however, it's incredibly hacky because as you scroll past the original table header and the sticky instance appends, the sticky header shakes due to all the DOM manipulation happening every time the event listener fires.</em></p>
  
  <p><em>Since it's recalculating with the logic above.</em></p>
  
  <p>Question: Can I have an absolutely positioned <strong>table header</strong> element also append to the top of the viewport like fixed positioning allows? Is there a more efficient solution out there?</p>