思路监听滚动然后利用css3的translateY属性位移表头即可
<div id='table-cont' style="max-height: 150px;width: 540px;overflow: scroll;">
<table>
<thead>
<tr align="center" style="background: #dcdcdc;">
<th>头1</th>
<th>头1</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var tableCont = document.querySelector('#table-cont');
function scrollHandle (event){
var scrollTop = event.target.scrollTop;
event.target.querySelector('thead').style.transform = 'translateY(' + scrollTop +'px)';
}
tableCont.addEventListener('scroll',scrollHandle);
</script>