Question

如何在Y方向滚动时修复完整的 thead ？

重要的是要注意表格宽度大于包装div。因此，在X-Direction中滚动也应滚动thead - ，因此将thead与table分开不是我猜的选项。

请参阅此fiddle

HTML

<div>
  <table>
  <thead>
    <tr>
      <th>
        One
      </th>
      <th>
        Two
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        DataOne
      </td>
      <td>
        DatTwo
      </td>
    </tr>
        <tr>
      <td>
        DataOne
      </td>
      <td>
        DatTwo
      </td>
    </tr>
        <tr>
      <td>
        DataOne
      </td>
      <td>
        DatTwo
      </td>
    </tr>
        <tr>
      <td>
        DataOne
      </td>
      <td>
        DatTwo
      </td>
    </tr>
  </tbody>
  </table>
</div>

CSS

div {
  width:80px;
  height:100px;
}
table {
  height:100px;
  display:block;
  overflow:auto;
}

Answer 1

解决方案是使用javascript为滚动事件处理程序分配一个函数。使用第二个表，如果table1没有向下滚动，则隐藏表2。当table1向下滚动时，在table2＆＃39; s上调用.show（）。

注意：您需要在HTML中包含JQuery。

<强> HTML

<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>

<强> CSS

body { height: 1000px; }

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

<强>使用Javascript / JQuery的

var tableOffset = $("#table-1").offset().top;

var $ header = $（＆＃34;＃table-1＆gt; thead＆＃34;）。clone（）; var $ fixedHeader = $（＆＃34;＃header-fixed＆＃34;）。append（$ header）;

$（window）.bind（＆＃34; scroll＆＃34;，function（）{ var offset = $（this）.scrollTop（）;

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

}）;

<强>小提琴：

http://jsfiddle.net/py8b0s7v/

Answer 2

th{
  position: sticky;
  top: 0;
  background-color:white;
}

您好，添加以上Css。

将位置设置为粘性而非固定。

修复了＆＃34;修复＆＃34;屏幕顶部的组件，无论它在页面上的什么位置。 Sticky使用JS来计算它在页面上的位置，并且仅在视口到达时才修复到顶部。简而言之，如果您希望组件上方的内容，请使用粘性。

Answer 3

这解决了我：

document.getElementById("TableHead").addEventListener("scroll", function(){
   var translate = "translate(0,"+this.scrollTop+"px)";
   this.querySelector("thead").style.transform = translate;
});

小提琴：https://jsfiddle.net/pxtokb4g/97/

HTML / CSS / JS：滚动时修复thead

3 个答案: