Scroll bar exceeds table title, table title fixed

CSS: Styles

#divTitle {padding:10px;position:relative;top:0px;width:93.5%; z-index:100; Background-color: #6FA1D8;}

<div id= "divtitle" style= "Display:none;" >
<table style= "width:100%; Border-collapse:collapse; " >
<tr style= "Background-color: #6fa1d8; height:24px; " >
<TD style= "width:130px;" > Function category name </td>
<TD style= "width:160px;" > Project Name </td>
<TD style= "width:130px;" > Initial Amount </td>
<TD style= "width:130px;" > Pending Approval Amount </td>
<TD style= "width:90px;" > Available Amount </td>
<TD style= "width:90px;" > Actual amount incurred </td>
<TD style= "width:90px;" > Use Percent Column </td>
</tr>
</table>
</div>

JS Script

function menufixed (ID) {
var obj = document.getElementById (ID);
var _getheight = obj.offsettop;
Window.onscroll = function () {
Changepos (ID, _getheight);
}
}
function Changepos (ID, height) {
var obj = document.getElementById (ID);
var scrolltop = Document.documentElement.scrollTop | | Document.body.scrollTop;
var height = $ ("#table_Collgrid"). Offset (). Top;
if (scrolltop+20 < height) {
obj.style.position = ' relative ';
Obj.style.display = "None";
} else {
obj.style.position = ' fixed ';
Obj.style.display = "";
}
}
Window.onload = function () {
Menufixed (' divtitle ');
}

Scroll bar exceeds table title, table title fixed