嘿，我来帮你搞定这个表头固定的问题！你的需求是页面顶部有固定页头、底部固定分页，表格滚动时表头保持可见，咱们一步步来完善方案：

首先，先理清楚合理的页面结构 #

你需要把表格放在一个独立的滚动容器里，这样表格的滚动和页面滚动分开，表头固定的逻辑会更准确：

<!-- 顶部固定页头 -->
<header class="top-header">页面顶部固定栏</header>

<!-- 表格专属滚动容器 -->
<div class="table-container">
  <table class="data">
    <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>邮箱</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- 这里放你的大量数据行 -->
      <tr><td>1</td><td>张三</td><td>zhangsan@example.com</td><td>编辑</td></tr>
      <tr><td>2</td><td>李四</td><td>lisi@example.com</td><td>编辑</td></tr>
      <!-- ...更多数据行 -->
    </tbody>
  </table>
</div>

<!-- 底部固定分页 -->
<footer class="bottom-pagination">
  <button>上一页</button>
  <span>第3页/共10页</span>
  <button>下一页</button>
</footer>

然后是关键的CSS样式 #

这里推荐用position: sticky来实现表头固定，比JS监听滚动更简单可靠，同时处理好固定页头、分页和表格容器的间距：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 顶部固定页头 */
.top-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px; /* 和你JS里的scrollValue对应 */
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  padding: 0 20px;
  z-index: 100; /* 确保在最上层 */
}

/* 表格滚动容器：留出顶部和底部固定元素的空间 */
.table-container {
  margin-top: 50px; /* 对应顶部页头高度 */
  margin-bottom: 60px; /* 对应底部分页高度 */
  max-height: calc(100vh - 110px); /* 视口高度减去顶部和底部的高度 */
  overflow-y: auto;
}

/* 表格基础样式 */
.data {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 可选：固定列宽，避免表头和内容错位 */
}

.data th, .data td {
  padding: 12px 16px;
  border: 1px solid #e5e7eb;
  text-align: left;
}

/* 表头默认样式 */
.data thead {
  background-color: #f3f4f6;
}

/* 核心：表头固定的sticky样式 */
.data thead th {
  position: sticky;
  top: 0; /* 相对于表格容器的顶部 */
  z-index: 50;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); /* 增加阴影，区分表头和内容 */
}

/* 底部固定分页 */
.bottom-pagination {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 100;
}

如果你还是想用JS实现（比如兼容老浏览器） #

那咱们修正你原来的代码，注意不要监听window.scroll，而是监听表格容器的滚动事件，这样逻辑更准确：

// 获取元素
const tableContainer = document.querySelector('.table-container');
const dataHeader = document.querySelector('.data thead');

// 监听表格容器的滚动
tableContainer.addEventListener('scroll', function() {
  // 当容器滚动距离大于0时，添加固定类
  if (this.scrollTop > 0) {
    dataHeader.classList.add('fixed');
  } else {
    dataHeader.classList.remove('fixed');
  }
});

对应的CSS里要给.fixed类加样式：

.data thead.fixed {
  position: absolute;
  top: 0;
  width: calc(100% - 17px); /* 减去滚动条宽度，避免表头超出 */
  background-color: #f3f4f6;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
}

几个注意点 #

• 用sticky方案时，要确保浏览器版本支持（现在Chrome、Firefox、Edge等现代浏览器都支持）
• 如果出现表头和内容错位，记得给表格设置table-layout: fixed，并给每列设置固定宽度
• 固定元素的z-index要合理设置，避免被其他元素遮挡

内容的提问来源于stack exchange，提问作者Bilal