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>
Before you post, read our: 
