Scrolling DataGrid with fixed column headers

Question

I have a page which contains some text followed by a rather long DataGrid (height).
What I want to do is "freeze" the DataGrid column headers, whilst allowing the user to scroll down through the items. I have tried the following approach which looks good initially, but as soon as you starts scrolling, the entire page scrolls and not just the DataGrid items, yet the Column Header remains in the same position (ie, it does not scroll with the rest of the page).
So, how do I get it so that only the Datagrid Items scroll (and not the rest of the page)?

 

 
<style type="text/css">
.DataGridFixedHeader { POSITION: relative; TOP: expression(this.offsetParent.scrollTop); BACKGROUND-COLOR: white }
</style>
.
page content above datagrid
.
<div style="overflow: scroll; ">
   <asp:DataGrid  id="grddeals" runat="server" BorderColor="#336666" BorderStyle="Double" BorderWidth="0px"
                  BackColor="White" CellPadding="4" GridLines="Both" AutoGenerateColumns="False" >
   <SelectedItemStyle Font-Bold="True" ForeColor="White" BackColor="#339966"></SelectedItemStyle>
   <ItemStyle ForeColor="#333333" BackColor="White" Font-Size="8" Height="20"></ItemStyle>
   <AlternatingItemStyle BackColor="LightGrey"></AlternatingItemStyle>
   <HeaderStyle Font-Bold="True" Font-Size="6" HorizontalAlign="Center" ForeColor="White" CssClass="DataGridFixedHeader" BackColor="Navy"></HeaderStyle>   
.
.
.
</Div>