JQuery floating table header

I've created a page for a client that lists a number of products in a table, since the table can sometimes be quite large the header falls off the top of the screen, so I've had a play with some JQuery and CSS and come up with a solution.

As the user scrolls down the page and hovers over a tag the header appears under the if the user hovers for more than a second, this is so it doesn't appear while scrolling.

CSS


#product-admin-floating-header
{
display:none;
}


JQuery


$("tr").hover(
function()
{//in
if($(this).attr("id")!="product-admin-floating-header" && $("#product-admin-floating-header").length==0 && $(this).attr("id")!="product-admin-table-header")
{
//$(this).animate({opacity: 1.0},500,"swing",
// function()
// {
$(this).after(""+$("#product-admin-table-header").html()+"");
$("#product-admin-floating-header").animate({opacity: 1},1000,"swing", function()
{
$("#product-admin-floating-header").fadeIn("slow");
});
// }
// );
}
},
function()
{//out
if($(this).attr("id")!="product-admin-floating-header")
{
$("#product-admin-floating-header").remove();
}
}
);