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

在页面滚动时使Bootstrap 4表头在顶部粘滞，可以通过以下步骤实现：

首先，确保你已经引入了Bootstrap 4的CSS和JavaScript文件。
在HTML页面中，创建一个包含表格的容器，例如一个<div>元素。
在该容器中，创建一个表格，并添加Bootstrap的表格类，例如table和table-striped。
在表格中，使用thead元素来定义表头行。
在表头行中，创建一个tr元素，并添加表头单元格th。
在JavaScript中，使用window对象的scroll事件来监听页面滚动。
在滚动事件的处理函数中，获取表格容器的位置和高度。
判断页面滚动的距离是否超过了表格容器的顶部位置。
如果超过了表格容器的顶部位置，将表头行的CSS属性position设置为fixed，并设置top属性为0。
如果没有超过表格容器的顶部位置，将表头行的CSS属性position设置为默认值。

下面是一个示例代码：

HTML:

<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>

JavaScript:

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 = '';
  }
});

这样，当页面滚动时，表头行将会在顶部粘滞显示。你可以根据需要自定义表格的样式和其他行为。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。