当用户用jQuery滚动表头时，它将保持在顶部的固定位置。

Question

当用户用jQuery滚动表头时，它将保持在顶部的固定位置。

我试图设计一个HTML表，当用户将其从视图中滚动出来时，标题将停留在页面的顶部。例如，该表可能从页面向下500像素，我如何使它使其如果用户滚动头出视图(浏览器检测到它不再在窗口视图中)，它将停留在顶部？有人能给我一个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>将有一个滚动条(溢出：AUTO)。

Answer 1

纯CSS(没有IE11支持)：table th {     position: -webkit-sticky; // this is for all Safari (Desktop & iOS), not for Chrome     position: sticky;     top: 0;     z-index: 5;     background: #fff;}