如何在页面滚动时使bootstrap 4表头在顶部粘滞

<div id="table-container">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
      </tr>
    </thead>
    <tbody>
      <!-- 表格内容 -->
    </tbody>
  </table>
</div>

window.addEventListener('scroll', function() {
  var tableContainer = document.getElementById('table-container');
  var tableContainerTop = tableContainer.offsetTop;
  var tableContainerHeight = tableContainer.offsetHeight;
  var tableHeader = tableContainer.querySelector('thead tr');

  if (window.pageYOffset > tableContainerTop) {
    tableHeader.style.position = 'fixed';
    tableHeader.style.top = '0';
  } else {
    tableHeader.style.position = '';
  }
});