>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3386007. --> Reported by: [jmouse888](https://www.drupal.org/user/170796) >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>The sticky table header is triggered whenever the header is out of the viewport, even if the header is below the bottom of the viewport. In other words, when the table is out of view (at the bottom of the page), the sticky header will show on top of the page, covering some necessary contents.</p> <p><img src="https://www.drupal.org/files/issues/2023-09-07/Screenshot_2023-09-07_18-11-51.png" alt="table out of view"></p> <p><img src="https://www.drupal.org/files/issues/2023-09-07/Screenshot_2023-09-07_18-12-31.png" alt="table in view"></p> <h4 id="summary-steps-reproduce">Steps to reproduce</h4> <p>Just go to any admin interface with a sticky table near the lower half of the page. View pages with a preview table on the bottom is a good choice. The sticky table header will show when the page is loaded. Start scrolling, and the sticky header will disappear when the actual table header comes into the viewport. Then when the table is scrolled up enough to hide the header, the sticky header will show again as expected.</p> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>The trigger is the IntersectionObserver in tableheader.js (themes/contrib/gin/js/overrides/tableheader.js)</p> <p><img src="https://www.drupal.org/files/issues/2023-09-07/Screenshot_2023-09-07_18-16-09.png" alt="js code"></p> <p>the statement on line 16 </p> <p><code>if (!e.isIntersecting &amp;&amp; e.rootBounds.top === stickyOffsetTop)</code></p> <p>is checking rootBounds.top with the stickyOffsetTop. However, since the sticky table header is inside of the real table, and it's positioned absolutely on top of the page at the stickyOffsetTop location, the test e.rootBounds.top === stickyOffsetTop will always be TRUE.</p> <p>Instead, it should be using e.intersectionRect.top === stickyOffsetTop so it's checking the top of the table position rather than its parent.</p> <p><strong>Original code</strong></p> <pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (!e.isIntersecting &amp;&amp; e.rootBounds.top === stickyOffsetTop) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; context.querySelector('.gin-table-scroll-wrapper').classList.add('--is-sticky');<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } else {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; context.querySelector('.gin-table-scroll-wrapper').classList.remove('--is-sticky');<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</pre><p><strong>New code</strong></p> <pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (!e.isIntersecting &amp;&amp; e.intersectionRect.top === stickyOffsetTop) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; context.querySelector('.gin-table-scroll-wrapper').classList.add('--is-sticky');<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } else {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; context.querySelector('.gin-table-scroll-wrapper').classList.remove('--is-sticky');<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</pre><h3 id="summary-remaining-tasks">Remaining tasks</h3> <p>Someone please test this and see if I should generate a patch.</p>