сделать положение заголовка таблицы фиксированным даже после прокрутки

У меня есть таблица с вертикальной полосой прокрутки

<div id="div_data" style="top: 7px;">
<table id="data" cellspacing="0" cellpadding="0">
<thead>
<tr class="fix"><td class="newClass"> <div> Algebra </div></td>
<td class="newClass"><div> Geometry</div></td>
<td class="newClass"><div> Theorems</div></td>
<td class="newClass"><div> Comment</div></td>
</tr>
</thead>
<tbody style="overflow:auto; height:100px;">
......................
</tbody>

</table>
<table id="header-fixed" cellspacing="0" cellpadding="0"></table>
</div>

Когда я прокручиваю #data tableМне нужно, чтобы элементы заголовка таблицы были исправлены без прокрутки. Для этого я сделал следующий код jquery:

var tableOffset = $("#data").offset().top;
var $header = $("#data > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);
$("#div_data").scroll(function(){
$('#div_row_headers').scrollTop($('#div_data').scrollTop());
var offset = $(this).scrollTop();

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

Содержимое внутри элемента первой таблицы клонируется внутри второй таблицы, но позиция #header-fixed Таблица не находится в области заголовка первой таблицы. Она находится в середине таблицы. Я просто хочу наложить ее на положение элементов в
#data table. Мой CSS ниже:

#header-fixed {
position: fixed;
display:none;
background-color:white;
}
table#header-fixed tr td {
width: 155px;
}
table#header-fixed tr td div {
width: 155px;
float: left;
text-align: center;
}

РЕДАКТИРОВАТЬ: Когда я прокручиваю полосу прокрутки Windows, новая таблица фиксируется, мне нужно прокручивать таблицу, когда я прокручиваю полосу прокрутки окна