How Do I Detect A Div Scroll In Jquery?

See more:

C#

C#4.0

jQuery

ASP.NET4

my Jquery

<script type="text/javascript">
        var pageIndex = 1;
        var pageCount;
        $(".template").scroll(function () {
            if ($(".template").scrollTop() == $(RepDetails).height() - $(".template").height()) {
                GetRecords();
            }
        });
 </script>

My CSS

<style type="text/css">
 template {
            height: 400px;
            overflow-y: scroll;
        }
    </style>

My html Tags

<div id="ScrollDiv" class="template">
                   <table>
                       <tr>
                           <td>
                               <asp:Repeater ID="RepDetails" runat="server" >
                                   <HeaderTemplate>
                                       <%--<table class="httable">
                               <tr>
                                   <td colspan="2">
                                       <b>JOBS</b>
                                   </td>
                               </tr>
                           </table>--%>
                                   </HeaderTemplate>
                                   <ItemTemplate>
                                       <table class="tl">
                                           <tr>
                                               <td><%-- style="border-top-color:#098ABA; border-top-width:thin; border-top-style:solid;"--%>
                                                   <table>
                                                       <tr>
                                                           <td class="ittrjd">
                                                               <asp:Label ID="lblSubject" runat="server" Text='<%#Eval("JobDecription") %>' />
                                                           </td>
                                                       </tr>
                                                   </table>
                                               </td>
                                           </tr>
                                           <tr>
                                               <td class="ittrcn">
                                                   <asp:Label ID="lblComment" runat="server" Text='<%#Eval("CompanyName") %>' />
                                               </td>
                                           </tr>
                                           <tr>
                                               <td style="border-bottom-color: #a9a9aa; border-bottom-width: thin; border-bottom-style: solid;">
                                                   <table>
                                                       <tr>
                                                           <td class="ittre">Experience:&nbsp;&nbsp;<asp:Label ID="lblUser" runat="server" Font-Bold="true" Text='<%#Eval("ExperienceRqrd") %>' /></td>
                                                           <td class="ittre">Salary:&nbsp;&nbsp;<asp:Label ID="lblDate" runat="server" Font-Bold="true" Text='<%#Eval("SalaryOffer") %>' /></td>
                                                       </tr>
                                                   </table>
                                               </td>
                                           </tr>
                                           <%--<tr>
                                   <td colspan="2" style="background-color:white;">&nbsp;</td>
                               </tr>--%>
                                       </table>
                                   </ItemTemplate>
                                   <FooterTemplate>
                                   </FooterTemplate>
                               </asp:Repeater>
                           </td>
                       </tr>
                       <tr>
                           <td>
                               <img alt="" src="images/loadingData.gif" style="display: none" />
                           </td>
                       </tr>
                   </table>
               </div>

i can not detect the scroll event of the div(id=ScrollDiv)

i am fetching 10 record and populate it in the repeter(id=RepDetails) and its workin fine and scrollbar is also there.
use the css template for the scrollbar in the div.

the original jquery was

<script type="text/javascript">
        $(window).scroll(function () {
            if ($(window).scrollTop() == $(document).height() - $(window).height()) {
                GetRecords();
            }
        });
</script>

which i modified for my project.i am sure that my jquery is not correct.please help me to solve the problem