当用户使用 jQuery 将表头滚动到视图之外时，表头保持固定在顶部

Question

我正在尝试设计一个 HTML 表格，当且仅当用户将其滚动到视图之外时，标题才会保留在页面顶部。例如，表格可能比页面向下 500 像素，如果用户将标题滚动到视图之外（浏览器以某种方式检测到它不再在 Windows 视图中），我该如何做到这一点，它会保持在顶部？任何人都可以给我一个 Javascript 解决方案吗？

 <table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>info</td>
      <td>info</td>
      <td>info</td>
    </tr>
    <tr>
      <td>info</td>
      <td>info</td>
      <td>info</td>
    </tr>
    <tr>
      <td>info</td>
      <td>info</td>
      <td>info</td>
    </tr>
  </tbody>
</table>

因此，在上面的示例中，我希望 <thead> 在页面超出视图时滚动。

重要提示：我 不是 在寻找 <tbody> 将有一个滚动条（溢出：自动）的解决方案。

原文由 user2385136 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以通过点击 scroll 上的事件处理程序来做这样的事情 window ，并使用另一个 table 顶部的固定位置显示标题这页纸。

 var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);

$(window).bind("scroll", function() {
  var offset = $(this).scrollTop();

  if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
    $fixedHeader.show();
  } else if (offset < tableOffset) {
    $fixedHeader.hide();
  }
});

 #header-fixed {
  position: fixed;
  top: 0px;
  display: none;
  background-color: white;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table-1">
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>info</td>
      <td>info</td>
      <td>info</td>
    </tr>
    <tr>
      <td>info</td>
      <td>info</td>
      <td>info</td>
    </tr>
    <tr>
      <td>info</td>
      <td>info</td>
      <td>info</td>
    </tr>
  </tbody>
</table>
<table id="header-fixed"></table>

当用户向下滚动到足以隐藏原始表头时，这将显示表头。当用户再次向上滚动页面足够远时，它将再次隐藏。

工作示例： https ://jsfiddle.net/andrewwhitaker/fj8wM/

原文由 Andrew Whitaker 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

纯 CSS（不支持 IE11）：

 table th {
    position: -webkit-sticky; // this is for all Safari (Desktop & iOS), not for Chrome
    position: sticky;
    top: 0;
    z-index: 1; // any positive value, layer order is global
    background: #fff; // any bg-color to overlap
}

原文由 Ihor Zenich 发布，翻译遵循 CC BY-SA 4.0 许可协议