html中滑动表头固定

在HTML中，实现滑动表头固定的常见做法是结合CSS和JavaScript（如jQuery）。这通常涉及到以下几个步骤：

1. **HTML结构**：首先，你需要有一个表格元素 `<table>`，其中包含列头 `<th>` 和数据行 `<tr>`。

<table class="scrolling-header">
  <thead>
    <tr>
      <!-- 滑动列头 -->
      <th class="fixed-header">标题1</th>
      <!-- 其他静态列头 -->
    </tr>
  </thead>
  <tbody>
    <!-- 表格数据 -->
  </tbody>
</table>

2. **CSS样式**：使用CSS来设置表头的样式，使其成为固定的部分。例如，你可以将`position: sticky;`应用到列头，同时限制其在滚动时的位置。

.fixed-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #f5f5f5;
}

3. **JavaScript/jQuery**（可选）：如果你想让头部在某些条件下自动滚动，可以使用JavaScript来监听滚动事件，并相应地调整列头的位置。例如，当滚动到顶部一定距离时，将列头的`position`恢复为`relative`。

$(window).on('scroll', function() {
  var headerHeight = $('.fixed-header').outerHeight();
  if ($(window).scrollTop() > headerHeight) {
    $('.fixed-header').css('position', 'relative');
  } else {
    $('.fixed-header').css('position', '-webkit-sticky');
  }
});