如何实现粘性标题与表头在表格最后一行出现时停止粘性

核心解决方案 #

通过监听页面滚动，实时计算表格最后一行与视口的位置关系，动态切换粘性容器的定位状态和底部间距，确保最后一行始终可见且最后消失。

修改后的完整代码 #

CSS

body {
  height: 1000px;
}

.table tbody td {
  min-width: 6rem;
  max-width: 6rem;
}

.table th {
  min-width: 6rem;
  max-width: 6rem;
}

.stickyHeader {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f5f5f5;
  margin-bottom: 0 !important; /* 默认无间距 */
  transition: position 0.1s; /* 可选：添加过渡让切换更平滑 */
}

/* 停止粘性时的样式 */
.stickyHeader.stop-sticky {
  position: static;
  margin-bottom: var(--last-row-height) !important;
}

JavaScript

$(document).ready(function() {
  $(".myTable").each(function() {
    const $tableContainer = $(this);
    const $stickyHeader = $tableContainer.find('.stickyHeader');
    const $lastTableRow = $tableContainer.find('.tableBody tr:last');
    const lastRowHeight = $lastTableRow.outerHeight();
    
    // 把最后一行高度存入CSS变量，方便样式调用
    $stickyHeader.css('--last-row-height', `${lastRowHeight}px`);

    // 滚动判断逻辑
    function checkScrollPosition() {
      // 计算最后一行顶部相对于视口的距离
      const lastRowViewportTop = $lastTableRow.offset().top - $(window).scrollTop();
      // 粘性容器的总高度
      const stickyHeaderTotalHeight = $stickyHeader.outerHeight();

      // 当最后一行即将被粘性容器遮挡时，停止粘性
      if (lastRowViewportTop <= stickyHeaderTotalHeight) {
        $stickyHeader.addClass('stop-sticky');
      } else {
        $stickyHeader.removeClass('stop-sticky');
      }
    }

    // 页面加载时先执行一次，确保初始状态正确
    checkScrollPosition();
    // 监听滚动事件，实时更新状态
    $(window).on('scroll', checkScrollPosition);
  });
});

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="myTable pb-4 ">
    <div class=" stickyHeader mb-0" >
        <h4 class="pb-1 ">My headline</h4>
        <div class="table-responsive">
            <table class="tableHeader table table-sm table-bordered border-dark  mb-0">
                <thead>
                    <tr>
                            <th>Col</th>
                            <th>Col</th>
                            <th>Col</th>
                            <th>Col</th>
                            <th>Col</th>
                            <th>Col</th>
                            <th>Col</th>
                            <th>Col</th>
                            <th>Col</th>
                            <th>Col</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <div class="table-responsive">
        <table class="tableBody  table table-responsive table-sm table-bordered border-dark mb-0">
            <tbody>
                    <tr>
                        <td > Content </td>
                        <td > Content </td>
                        <td > Content </td>
                        <td > Content </td>
                        <td > Content </td>
                        <td > Content </td>
                        <td > Content </td>
                        <td > Content </td>
                        <td > Content </td>
                        <td > Content </td>
                    </tr>
                    <tr>
                        <td > Content </td>
                        <td > Content </td>
                        <td > Content </td>
                        <td > Content </td>
                        <td > Content </td>
                        <td > Content </td>
                        <td > Content </td>
                        <td > Content </td>
                        <td > Content </td>
                        <td > Content </td>
                    </tr>
                    <tr>
                        <td > Content </td>
                        <td > Content </td>
                        <td > Content </td>
                        <td > Content </td>
                        <td > Content </td>
                        <td > Content </td>
                        <td > Content </td>
                        <td > Content </td>
                        <td > Content </td>
                        <td > Content </td>
                    </tr>
              </tbody>
          </table>
      </div>
  </div>
</body>
</html>

关键逻辑说明 #

1. 位置计算：通过offset().top - $(window).scrollTop()得到最后一行顶部相对于当前视口的距离，判断它是否会被粘性容器遮挡。
2. 动态切换类：当最后一行即将被遮挡时，给粘性容器添加stop-sticky类，移除粘性定位并设置等于最后一行高度的底部间距；反之恢复粘性状态。
3. 初始状态处理：页面加载时立即执行一次位置检查，避免初始状态下出现异常。
4. CSS变量复用：把最后一行高度存入CSS变量，让样式和脚本逻辑解耦，维护更方便。

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