Dieses kleine JQuery-JavaScript ist eine sehr schmale Variante, um auf einer scrollbaren Seiten bei langen Tabellen den Tabellenkopf (angelegt im Bereich THEAD) über der Tabelle zu fixieren, so dass dieser sichtbar über der Tabelle stehen bleibt und nicht aus dem sichbaren Bereich herausscrollt.

Bei der HTML-Ausgabe der Tabelle, muss diese ein ID-Attribut mit dem Inhalt #StructureTbl besitzen.

jQuery(document).ready(function() { jQuery().tackOnTopStructureTblHead('#StructureTbl'); });
jQuery(window).resize( function() { jQuery().tackOnTopStructureTblHead('#StructureTbl'); });

var fixedHeader = false;

jQuery.fn.tackOnTopStructureTblHead = function(Tbl) {

    var FixedHead = 'table' + Tbl + ' thead';
    var $StructureTblHead = jQuery(FixedHead);
    var $StructureTblHeadThSet = jQuery('th',$StructureTblHead);
    var posTbl = jQuery(FixedHead).offset();
    var min = posTbl.top - 20;

    jQuery(window).scroll(function() {
        // console.log(jQuery(window).scrollTop());
        if (jQuery(window).scrollTop() >= min) {
            if (!fixedHeader) {
                fixedHeader = true;
                var widths = [];
                $StructureTblHeadThSet.each( function(i, element) {
                    widths[i] = jQuery(element).width();
                });
                jQuery('<thead class="fixed">' + jQuery($StructureTblHead).html() + '</thead>').insertAfter($StructureTblHead);
                jQuery(FixedHead+'.fixed th').each( function(i, element) {
                    jQuery(element).css('width', widths[i] + 'px');
                });
            }
        } else {
            jQuery(FixedHead+'.fixed').remove();
            fixedHeader = false;
        }
        if (jQuery(window).scrollTop() > jQuery('table'+Tbl).height() + min - $StructureTblHead.height()) {
            jQuery(FixedHead+'.fixed').remove();
            fixedHeader = false;
        }
    });
};

In der CSS-Datei muss dann noch für die Tabelle mit fixem Header folgende Styleanweisung abgelegt werden:

#StructureTbl thead.fixed { position:fixed; top: 0; border-top: 20px solid white;}

Hier noch eine weitere Variante, die etwas besser ausgebaut wurde, weil diese nicht nur mit einer Tabelle auf der Seite funktioniert, sondern mehrere Tabellen behandeln kann. 

Damit das Script greift müssen die Tabellen, statt wie oben die ID zu befüllen, hier besser mit dem Selector table.fixed-tbl-header ausgestattet werden.

jQuery(document).ready( function() { jQuery().fiexdTblHead(); });
jQuery(window).resize ( function() { jQuery().fiexdTblHead(); });

jQuery.fn.fiexdTblHead = function() {
    jQuery('table.fixed-tbl-header').each( function () {
        var fixedHeader = false;
        var table  = jQuery(this);
        var origiHeader = jQuery('thead', table);
        var headerThSet = jQuery('th',origiHeader);
        var posTbl = origiHeader.offset();
        var min = posTbl.top - 20;

        jQuery(window).on('scroll', function() {
            if (jQuery(window).scrollTop() >= min) {
                var thWidths = [];
                if (!fixedHeader) {
                    fixedHeader = true;
                    headerThSet.each( function(i, element) {
                        thWidths[i] = jQuery(element).width();
                    });
                    jQuery('<thead class="fixed">' + jQuery(origiHeader).html() + '</thead>').insertAfter(origiHeader);
                    jQuery('.fixed th',table).each( function(i, element) {
                        jQuery(element).css('width', thWidths[i] + 'px');
                    });
                }
            } else {
                jQuery('.fixed',table).remove();
                fixedHeader = false;
            }
            if (jQuery(window).scrollTop() > (table.height() - origiHeader.height()) + min ) {
                jQuery('.fixed',table).remove();
                fixedHeader = false;
            }
        })
    });
};

Auch hierfür muss es in der CSS-Datei noch eine Style-Anweisung geben, die dann so aussehen kann:

table.fixed-tbl-header thead.fixed { position:fixed; top: 0; border-top: 20px solid white;}

Ein Hinweis zum border-top mit dem Beispielwert 20px der hier gesetzt wurde. Damit wird eine kleiner Abstand des Tabellenkopfes zum oberen Srollrahmen-Rand erzeugt, einfach damit die Tabelle nicht oben andockt sondern noch etwas hübscher Abstand einhält. Dieser Wert von 20 widerspiegelt sich im JavaScript mit dem Abzug von 20 vom Wert min. Beide Wert können auch gleichsam geändert werden oder man parametrisiert diesen.