I have a table w/a sticky header inside a div - seems to be working OK. Now I want to catch the divs onscroll event and I have noticed something strange in firefox (but not IE); if the tbody has height, then header is sticky, but no onscroll is fired; however, if the tbody has no height, then the onscroll event fires but the header is no longer sticky. Does anybody have any insight/workarounds for this?
To demonstrate comment/uncoment the height: 250px; line below:

Code:
<html>
  <head>
    <title>On Scroll Demo</title>
    <style type="text/css">
      div.tableContainer {
      	width: 100%;
      	height: 295px;
      	overflow: auto;
      	margin: 0 auto;
      	}

      table.datatable {
      	width: 99%;
      	border: none;
      	background-color: #f7f7f7;
      	}	
      table.datatable tbody	{  
      	
/*Take height out, then onscroll event is fired, but header not sticky :(*/        
/*Keep height in, then header is sticky, but no onscroll is fired*/
      	
        height: 250px;
        
      	overflow-x: hidden;
        overflow: auto;
      	}	
      table.datatable thead tr	{
      	position:relative; 
      	color: green;
      	background-color: #CCCCCC;
      	top: expression(offsetParent.scrollTop); /*IE5+ only*/
      	}
	
      	table.datatable thead td { 
              font-size: 12px;
              font-weight: bold;
              text-align: center;
              background-color: #CCCCCC;
              color: green;
              position: relative;
              border: solid slategray 1px;
          } 
	
        table.datatable td	{
        	color: #000;
        	padding-right: 2px;
        	font-size: 12px;
        	text-align: right;
        	border-bottom: solid 1px #d8d8d8;
        	border-left: solid 1px #d8d8d8;
        	}
          table.datatable tfoot td	{
                  text-align: center;
                  font-size: 11px;
                  font-weight: bold;
                  background-color: #DDDDDD;
                  color: green;
                  border-top: solid #999999 1px;
          	}
          table.datatable  tr.datatable-odd { 
                background-color: #DDDDDD;/*#CCCCCC;*/
            }
           table.datatable tr.datatable-even { 
                background-color: #FFFFFF;/*#CCCCCC;*/
            }
          table.datatable td:last-child {padding-right: 20px;} /*prevent Mozilla scrollbar from hiding cell content*/
          table.datatable thead td:last-child {padding-right: 20px;} /*prevent Mozilla scrollbar from hiding cell content*/
    </style>
    <script type="text/javascript">
      function SetDivPosition(){
        var intY = document.getElementById("tableContainer").scrollTop;
        document.title = intY;
      }
    </script>
</head>
  <body>
    <div id="tableContainer" class="tableContainer" onscroll="SetDivPosition()">
      <table id="datatable" class="datatable">
        <thead><tr>
      <td ts_nosort="true"><a style="text-decoration: none; font-weight: bold; color: black;" onmouseover="this.oldstyle=this.style.cssText;this.style.color='green'" onmouseout="this.style.cssText=this.oldstyle;" class="abc">Image</a></td>
        </tr></thead>
        <tbody>
        <tr>    
          <td>
            <a><img src="http://www.google.com/images/nav_logo3.png" title=":)"></a>
          </td>  
        </tr>
        <tr>    
          <td>
            <a><img src="http://www.google.com/images/nav_logo3.png" title=":)"></a>
          </td>  
        </tr>
        <tr>    
          <td>
            <a><img src="http://www.google.com/images/nav_logo3.png" title=":)"></a>
          </td>  
        </tr>
        <tr>    
          <td>
            <a><img src="http://www.google.com/images/nav_logo3.png" title=":)"></a>
          </td>  
        </tr>
        <tr>    
          <td>
            <a><img src="http://www.google.com/images/nav_logo3.png" title=":)"></a>
          </td>  
        </tr>
        <tr>    
          <td>
            <a><img src="http://www.google.com/images/nav_logo3.png" title=":)"></a>
          </td>  
        </tr>
        <tr>    
          <td>
            <a><img src="http://www.google.com/images/nav_logo3.png" title=":)"></a>
          </td>  
        </tr>
        <tr>    
          <td>
            <a><img src="http://www.google.com/images/nav_logo3.png" title=":)"></a>
          </td>  
        </tr>
                <tr>    
          <td>
            <a><img src="http://www.google.com/images/nav_logo3.png" title=":)"></a>
          </td>  
        </tr>
        <tr>    
          <td>
            <a><img src="http://www.google.com/images/nav_logo3.png" title=":)"></a>
          </td>  
        </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>