Set fixed header in ASP.Net Repeater on scroll using jQuery

I have a repeater control inside a Panel. I would like the headers to remain at the top when i scroll down.

<asp:Panel ID="Panel1" CssClass="panel panel-success" runat="server">
    <div class="panel-heading">
        <h3 class="panel-title ">Panel</h3>
    </div>
    <div class="table-responsive">
        <asp:Repeater ID="rpTest" OnItemDataBound="ItemDataBound" runat="server">
            <HeaderTemplate>
                <table class="table table-striped table-bordered table-hover table-condensed" border="1" id="Table1">
                    <tr runat="server" id="rpTestHeaders">
                        <th style="text-align: center;vertical-align:middle;">Head1</th>
                        <th style="text-align: center;vertical-align:middle;">Head2</th>
                        <th style="text-align: center;vertical-align:middle;">Head3</th>
                    </tr>
            </HeaderTemplate>
            <ItemTemplate>
                <tr runat="server" style="vertical-align:central;" id="rpTestCols">
                    <td style="text-align: center;vertical-align:middle;">
                        <asp:Label Text='<%# Eval("CapturedDateTime", "{0: dd/MM/yyyy}")%>' runat="server" ID="lblCaptureDate" />
                    </td>
                    <td style="text-align: center;vertical-align:middle;">
                        <asp:Label Text='<%#DataBinder.Eval(Container.DataItem, "Col2")%>' runat="server" ID="lblCol2" )%>' " />
                    </td>
                    <td style="text-align: center;vertical-align:middle;">
                        <asp:Label Text='<%#DataBinder.Eval(Container.DataItem, "Col2")%>' runat="server" ID="lblCol2" )%>' " />
                </tr>
            </ItemTemplate>
            <FooterTemplate>
                </table>
            </FooterTemplate>
        </asp:Repeater>
    </div>
    <div class="panel-footer"></div>
</asp:Panel>