How to keep the datagrid header fixed irrespective of scrolling?

See more:

C#2.0

Javascript

CSS

HTML

In my project we are using asp.net 2.0 DataGrid(Not GridView). Now I want to keep the Header of the DataGrid fixed inspite of scrolling due to huge number of data. I have got many solutions, but all of them point to using a css class for the HeaderStyle of the DataGrid,the css class should have the following style:

position: relative; 
top: expression(this.offsetParent.scrollTop);

Now, the problem is:expression itself is deprecated, and its not supported for cross browser also. Any idea how I can achieve this in DataGrid without using the "expression"? Here is a JSFiddle link for the problem:https://jsfiddle.net/ky8ejqrk/.I have also shared the GridHead css as well.

Thanks in advance!

What I have tried:

https://jsfiddle.net/ky8ejqrk/