On large HTML tables, in a height-constricted viewport, keeps the 'thead' visible while the table is scrolled.

fixedTableHeader.js

(function($){
  $.fn.extend({
    fixedTableHeader: function(options) {
      var defaults = { wrapper : null, offset : 0 };
      options =  $.extend(defaults, options);
      return this.each(function() {
        var o = options;
        if (o.wrapper === null) { $(this).wrap('<div class="w" />'); o.wrapper = $('.w'); }
          var scrollbarWidth = function(){var a=$('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div></div>');$('body').append(a);var b=$('div',a).innerWidth();a.css('overflow-y','auto');var c=$('div',a).innerWidth();$(a).remove();return b-c;};
          $(this).clone().appendTo(o.wrapper).wrap('<div class="b" />');
          $(this).wrap('<div class="h" />');
          $('div.h', o.wrapper).css({ 'padding-right': scrollbarWidth + 'px' });
          $('div.h table', o.wrapper).css({ 'margin-right': scrollbarWidth + 'px' });
          o.wrapper.css({'overflow': 'hidden'});
          $('div.h').css({ 'overflow-y': 'hidden', 'height': ($('div.h thead').outerHeight() + o.offset) + 'px' });
          $('div.b').css({ 'overflow-y': 'scroll', 'position': 'relative', 'height': (o.wrapper.innerHeight() - $('div.h thead').outerHeight()) + 'px' });
          $('div.h table tbody, div.b table thead').css({ 'visibility': 'hidden' });
          $('div.b table').css({ 'position': 'static', 'margin-top': '-' + $('div.h thead').outerHeight() + 'px' });
      });
    }
  });
})(jQuery);