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

小编典典

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

html

我正在尝试设计一个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>具有滚动条的解决方案（溢出：自动）。

阅读 592

2020-05-10

共1个答案

小编典典

您可以通过点击上的scroll事件处理程序window并使用另一个table具有固定位置的事件处理程序来执行此操作，以在页面顶部显示标题。

HTML：

<table id="header-fixed"></table>

CSS：

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

JavaScript：

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();
    }
});

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

2020-05-10