JavaScript fix table header on scroll

<style> .table-container { height: 300px; overflow-y: scroll; } .sticky-header { position: sticky; top: 0; background-color: #f9f9f9; } .table-container tbody { height: 500px; } </style> <script> window.addEventListener('scroll', function() { var table = document.querySelector('.table-container table'); var header = table.querySelector('thead'); if (window.pageYOffset > table.offsetTop) { header.classList.add('sticky-header'); } else { header.classList.remove('sticky-header'); } }); </script> <div class="table-container"> <table border> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> </tr> </tbody> </table> </div>