Here is a complete solution based on Solution 1 (Works Great, Looks Great).
Make sure to add the following code to your aspx file.
<style>
.floatingHeader {
position: fixed;
top: 0;
visibility: hidden;
background-color:antiquewhite;
z-index: 1000;
}
</style>
<script>
function UpdateTableHeaders() {
$(".persist-area").each(function () {
var element = $(this),
offset = element.offset(),
scrollTop = $(window).scrollTop(),
floatingHeader = $(".floatingHeader", this)
if ((scrollTop > offset.top) && (scrollTop < offset.top + element.height())) {
floatingHeader.css({
"visibility": "visible"
});
} else {
floatingHeader.css({
"visibility": "hidden"
});
};
});
}
$(document).ready(function() {
$(window)
.scroll(UpdateTableHeaders)
.trigger("scroll");
});
window.onload = function () {
$("table.tableWithFloatingHeader").each(function () {
$(this).wrap("<div class='divTableWithFloatingHeader' style='position:relative'></div>");
$("tr:first", this).before($("tr:first", this).clone());
clonedHeaderRow = $("tr:first", this);
clonedHeaderRow.addClass("floatingHeader");
var rowThs = $("tr:nth-child(2)", this).children("th");
var crowThs = $("tr:nth-child(1)", this).children("th"); ;
for (var i = 0; i < rowThs.size(); ++i) {
crowThs.eq(i).width(rowThs.eq(i).width() );
}
});
}
window.onresize = function () {
$("table.tableWithFloatingHeader").each(function () {
clonedHeaderRow = $("tr:first", this);
var rowThs = $("tr:nth-child(2)", this).children("th");
var crowThs = $("tr:nth-child(1)", this).children("th");;
for (var i = 0; i < rowThs.size() ; ++i) {
crowThs.eq(i).width(rowThs.eq(i).width());
}
});
}
</script>
Now, make sure to add the classes persist-area and tableWithFloatingHeader with HeaderStyle Class of persist-header to your table.
<asp:GridView EnableViewState="false" ID="grid_Results" runat="server" AutoGenerateColumns="False" Class="persist-area tableWithFloatingHeader">
Follow these steps and it should work perfectly.
If you also want to change the color of the header, follow these additional two steps.
Add the following CSS right after the style tag.
In the code-behind file (aspx.vb), add the following code to the DataBound event of the grid:
Protected Sub grid_Results_DataBound(sender As Object, e As EventArgs) Handles grid_Results.DataBound
If grid_Results.HeaderRow IsNot Nothing Then
grid_Results.HeaderRow.TableSection = TableRowSection.TableHeader
End If
End Sub