Fixed gridview header using css and jquery in asp.net

////////////////////// HTML

<style type="text/css">

        .table-scroll

        {

            position: relative;

            max-width: 1280px;

            width: 100%;

            margin: auto;

            display: table;

        }

        .table-wrap

        {

            width: 100%;

            display: block;

            height: 300px;

            overflow: auto;

            position: relative;

            z-index: 1;

        }

        .table-scroll table

        {

            width: 100%;

            margin: auto;

            border-collapse: separate;

            border-spacing: 0;

        }

        .table-scroll th, .table-scroll td

        {

            padding: 5px 10px;

            border: 1px solid #000;

            background: #fff;

            vertical-align: top;

        }

        .table-faux table

        {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            pointer-events: none;

        }

        .table-faux table + table

        {

            top: auto;

            bottom: 0;

        }

        .table-faux table tbody, .table-faux tfoot

        {

            visibility: hidden;

            border-color: transparent;

        }

        .table-faux table + table thead

        {

            visibility: hidden;

            border-color: transparent;

        }

        .table-faux table + table tfoot

        {

            visibility: visible;

            border-color: #000;

        }

        .table-faux thead th, .table-faux tfoot th, .table-faux tfoot td

        {

            background: #ccc;

        }

        .table-faux

        {

            position: absolute;

            top: 0;

            right: 0;

            left: 0;

            bottom: 0;

            overflow-y: auto;

        }

        .table-faux thead, .table-faux tfoot, .table-faux thead th, .table-faux tfoot th, .table-faux tfoot td

        {

            position: relative;

            z-index: 2;

        }

    </style>

<div class="table-scroll dist-scroll">

<div class="table-faux dist-faux" aria="hidden">

</div>

<div class="table-wrap dist-wrap">

<asp:GridView runat="server" ID="GV_District" AutoGenerateColumns="false" DataKeyNames="DistrictCode,StateCode" CssClass="table table-striped table-bordered table-hover table-responsive main-table dist-table" Style="width: 100%;">

<Columns>

<asp:TemplateField HeaderText="SNo.">

<ItemTemplate>

<%#Container.DataItemIndex+1 %>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="District">

<ItemTemplate>

<asp:LinkButton runat="server" ID="Lbtn_District_Click" Text='<%#Eval("DistrictName") %>'

OnClick="Lbtn_District_Click"></asp:LinkButton>

</ItemTemplate>

<ItemStyle CssClass="text-left" />

</asp:TemplateField>

<asp:BoundField HeaderText="Latitude" DataField="Lat" />

<asp:BoundField HeaderText="Longitude" DataField="Long" />

<asp:TemplateField HeaderText="Action">

<ItemTemplate>

<asp:LinkButton runat="server" ID="Lbtn_DistrictEdit" OnClick="Lbtn_DistrictEdit_Click"> <i class=" fa fa-edit f-16"></i> </asp:LinkButton>

</ItemTemplate>

</asp:TemplateField>

</Columns>

<RowStyle CssClass="text-center" />

</asp:GridView>

</div>

</div>

////////////// JQuery

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

   <script>

                    $(document).ready(function () {

                        FixedGridHeaderes();

                    });

                    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(FixedGridHeaderes);

                    function FixedGridHeaderes() {

                        getHeader("dist-table", "dist-faux", "dist-wrap", "500");

                        getHeader("bl-table", "bl-table", "bl-wrap", "500");

                        getHeader("ba-table", "ba-table", "ba-wrap", "500");

                        getHeader("sba-table", "sba-table", "sba-wrap", "500");

                    }

                    function getHeader(tblcss, clcss, scllCss, scllHeight) {

                        $('.' + scllCss).height(scllHeight);

                        $("." + tblcss).clone(true).appendTo('.' + clcss).addClass('clone');

                        $("." + tblcss + ".clone").clone(true).appendTo('.' + clcss).addClass('clone2');

                    }

                </script>

///////////////////////// CS

public static bool Grid_Add_Headers(GridView GV)

    {

        bool gethead = true;

        try

        {

            //This replaces <td> with <th>   

            GV.UseAccessibleHeader = true;

            //This will add the <thead> and <tbody> elements   

            GV.HeaderRow.TableSection = TableRowSection.TableHeader;

            //This adds the <tfoot> element. Remove if you don't have a footer row   

            GV.FooterRow.TableSection = TableRowSection.TableFooter;

           

        }

        catch (Exception ex)

        {

        }

        return gethead;

    }

//////////////////////// Result