当用户用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;}