Freeze first column and row in GridView ASP.NET using JavaScript

I'm trying to freeze the first column and row of the gridview with this JavaScript code, the first row is getting frozen correctly but I still can not make the first row also frozen.

<script type = "text/javascript">
var GridId = "<%=GridView1.ClientID %>";
var ScrollHeight = 425;
window.onload = function () {
    var grid = document.getElementById(GridId);
    var gridWidth = grid.offsetWidth;
    var gridHeight = grid.offsetHeight;
    var headerCellWidths = new Array();
    for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
        headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
    }
    grid.parentNode.appendChild(document.createElement("div"));
    var parentDiv = grid.parentNode;

    var table = document.createElement("table");
    for (i = 0; i < grid.attributes.length; i++) {
        if (grid.attributes[i].specified && grid.attributes[i].name != "id") {
            table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
        }
    }
    table.style.cssText = grid.style.cssText;
    table.style.width = gridWidth + "px";
    table.appendChild(document.createElement("tbody"));
    table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
    var cells = table.getElementsByTagName("TH");

    var gridRow = grid.getElementsByTagName("TR")[0];
    for (var i = 0; i < cells.length; i++) {
        var width;
        if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {
            width = headerCellWidths[i];
        }
        else {
            width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
        }
        cells[i].style.width = parseInt(width - 3) + "px";
        gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
    }
    parentDiv.removeChild(grid);

    var dummyHeader = document.createElement("div");
    dummyHeader.appendChild(table);
    parentDiv.appendChild(dummyHeader);
    var scrollableDiv = document.createElement("div");
    if(parseInt(gridHeight) > ScrollHeight){
         gridWidth = parseInt(gridWidth) + 17;
    }
    scrollableDiv.style.cssText = "overflow:auto;height:" + ScrollHeight + "px;width:" + gridWidth + "px";
    scrollableDiv.appendChild(grid);
    parentDiv.appendChild(scrollableDiv);
}

With this code when scrolling down the right scrollbar first line is frozen exactly as it has to be but when Scroll to the scroll bar side the first line does not stay frozen