如何实现滚动时表格表头固定在底部并随其他内容出现而消失？

问题背景 #

使用position: sticky; bottom: 0固定表格thead到页面底部时完全无效，改用position: fixed; bottom: 0后表头固定生效，但表格内容滚动完毕、页面其他内容显示时，表头仍停留在底部，无法自动消失或复位。

方案一：滚动时固定表头，表格离开视口后隐藏表头 #

通过JavaScript监听滚动事件，判断表格是否还在视口范围内，当表格底部已滚动出视口（即其他内容开始显示），就隐藏thead；反之则保持固定。

实现代码 #

1. 给thead添加控制类并设置基础样式：

.fixed-bottom-header {
  position: fixed;
  bottom: 0;
  z-index: 99;
  background-color: #fff; /* 添加背景色避免遮挡下方内容 */
  width: 100%; /* 确保宽度与表格匹配，可根据实际调整 */
}

.hidden-header {
  display: none;
}

2. 添加滚动监听逻辑：

const table = document.querySelector('.tableOnScroll');
const thead = document.querySelector('.mobile-head-table');

window.addEventListener('scroll', () => {
  const tableRect = table.getBoundingClientRect();
  // 表格完全滚出视口时，隐藏表头并取消固定
  if (tableRect.bottom < 0) {
    thead.classList.add('hidden-header');
    thead.classList.remove('fixed-bottom-header');
  } else {
    thead.classList.remove('hidden-header');
    thead.classList.add('fixed-bottom-header');
  }
});

方案二：基于fixed定位，表格离开后复位表头位置 #

如果不想隐藏表头，而是让它回到表格原位置，可通过切换定位属性实现：

实现代码 #

1. 设置基础CSS样式：

.fixed-bottom-header {
  position: fixed;
  bottom: 0;
  z-index: 99;
  background-color: #fff;
  width: 100%;
}

.mobile-head-table {
  position: static; /* 默认静态定位，让表头归位到表格内 */
}

2. 添加滚动监听逻辑：

const table = document.querySelector('.tableOnScroll');
const thead = document.querySelector('.mobile-head-table');

window.addEventListener('scroll', () => {
  const tableRect = table.getBoundingClientRect();
  // 表格仍在视口范围内时保持固定，否则复位
  if (tableRect.top < window.innerHeight && tableRect.bottom > 0) {
    thead.classList.add('fixed-bottom-header');
  } else {
    thead.classList.remove('fixed-bottom-header');
  }
});

补充说明 #

若此前position: sticky无效，大概率是父元素（如表格容器）设置了overflow: hidden/scroll，或者未给sticky元素设置合适宽度，可检查父元素属性后尝试重新使用sticky：

.tableOnScroll {
  overflow: visible; /* 确保父元素不截断sticky元素 */
}

.mobile-head-table {
  position: sticky;
  bottom: 0;
  z-index: 99;
  background-color: #fff;
}

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