如何让粘性<thead>在父<table>结束前50px取消固定避免遮挡最后一行

纯CSS方案（优先推荐） #

该方案利用CSS粘性定位的原生特性实现，无需引入脚本，性能最优：

/* 表格容器设置 */
table {
  position: relative;
  /* 底部预留50px缓冲空间，对应提前取消固定的距离 */
  padding-bottom: 50px;
  border-collapse: collapse;
  width: 100%;
}

/* 表头粘性设置 */
thead th {
  position: sticky;
  top: 0;
  /* 必须设置不透明背景，避免内容穿透 */
  background: #ffffff;
  z-index: 9;
}

实现原理：粘性定位元素的固定状态会在其包含块（此处为table元素）的底部进入视口后自动失效。给表格添加padding-bottom: 50px相当于将包含块的底部边界向下延伸50px，表头就会提前50px跟随表格上滑，刚好避免遮挡最后一行内容。

jQuery兼容方案 #

如果存在CSS方案不适用的场景（如复杂嵌套滚动容器、旧设备兼容需求），可使用脚本实现：

$(function() {
  // 替换为实际的表格选择器
  const $targetTable = $('#your-table-id');
  const $thead = $targetTable.find('thead');
  const theadHeight = $thead.outerHeight();
  // 提前取消固定的距离，可自行调整
  const triggerOffset = 50;

  // 添加滚动节流，避免性能损耗
  let isTicking = false;
  // 如果是容器内滚动，将$(window)替换为滚动容器选择器
  $(window).on('scroll', function() {
    if (!isTicking) {
      window.requestAnimationFrame(() => {
        const scrollTop = $(window).scrollTop();
        const tableBottomOffset = $targetTable.offset().top + $targetTable.outerHeight();
        // 计算表格底部距离视口顶部的距离
        const tableBottomToViewportTop = tableBottomOffset - scrollTop;

        if (tableBottomToViewportTop < theadHeight + triggerOffset) {
          // 达到阈值，取消粘性固定
          $thead.css('position', 'relative');
        } else {
          // 恢复粘性固定
          $thead.css('position', 'sticky');
        }
        isTicking = false;
      });
      isTicking = true;
    }
  });
});

注意事项 #

• 确保表格没有被设置了overflow: hidden/auto/scroll的父元素包裹，否则粘性定位的参照对象会发生变化，导致失效
• 若为容器内滚动场景，需要同步调整滚动监听对象、偏移量计算逻辑
• 表头必须设置不透明背景，否则滚动时内容会从表头下方透出

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