Scrollable GridView with fixed grid header and footer

<div id="content_center">Hi Everybody,</div> <div> </div> <div>I want Scrollable GridView with Fixed header and Footer for that purpose im using CSS class and call that Css class in GridView Header and footer also. But whats the problem is when i scroll down header is missing , when i scroll up footer is missing. But i want to fix header and footer and scrolling only DataRow objects . How to do this. Can any one give me some valueble suggestions out of this..

My code is look like below</div>

<style type="text/css">
.GVFixedHeader { font-weight:bold background-color: Green position:relative                  top:expression(this.parentNode.parentNode.parentNode.scrollTop-1)}
.GVFixedFooter { font-weight:bold background-color: Green position:relative                 bottom:expression(getScrollBottom(this.parentNode.parentNode.parentNode.parentNode))} </style><script language="javascript" type="text/javascript">    function getScrollBottom(p_oElem) {        return p_oElem.scrollHeight - p_oElem.scrollTop - p_oElem.clientHeight    }</script>

<script language="javascript" type="text/javascript">    
function getScrollBottom(p_oElem) {        
return p_oElem.scrollHeight - p_oElem.scrollTop - p_oElem.clientHeight    
}</script>

and call that Css class in Grid Header, Footer styles.

<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" CssClass="GVFixedFooter"/> <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" CssClass="GVFixedHeader" />

Note: Place my grid inside Panel Control

Please find the attachments for better understanding..

Thanks in Advance...


 

<div></div>