Fixed header remains visible after scrolling past table

[rotaris]

The fixed header remains visible in a long page where there is more content after the table ends. It'd be great if the fixed header disappears/stops after the table ends so you could have multiple tables on the same page.

[oma]

I'd imagine a table body scroller would be better in scch a case, not a page scroller. Anyway, feel free to fork and implement. It would be a nice feature.

[bgerm]

You could try something like the code below, which changes the cloned/fixed header from a fixed position to an absolute position once the header reaches the top of the last tr element.

Notes: Only tested in FF 16.0.2. The code also changes the table from static to relative.

diff --git a/table-fixed-header.js b/table-fixed-header.js
index ab0468b..36474be 100644
--- a/table-fixed-header.js
+++ b/table-fixed-header.js
@@ -17,6 +17,21 @@ $.fn.fixedHeader = function (options) {

   function processScroll() {
     if (!o.is(':visible')) return;
+
+    $headCopy = $("thead.header-copy");
+    $lastTr = $("tbody tr:last", o);
+
+    headOffest = $headCopy.offset();
+    lastOffset = $lastTr.offset();
+
+    headCopyPos = $headCopy.css("position");
+
+    if (headCopyPos == "fixed" && headOffest.top + $headCopy.height() >= lastOffset.top) {
+      $headCopy.css("position", "absolute").css("bottom", $lastTr.height()).css("top", "auto"); 
+    } else if (headCopyPos == "absolute" && $(window).scrollTop() < headOffest.top - config.topOffset) {
+      $headCopy.css("position", "fixed").css("bottom", "auto").css("top", "40px");
+    }
+
     if ($('thead.header-copy').size())
     var i, scrollTop = $win.scrollTop();
     var t = $head.length && $head.offset().top - config.topOffset;
@@ -46,8 +61,9 @@ $.fn.fixedHeader = function (options) {
   $head.css({ margin:'0 auto',
               width: o.width(),
              'background-color':config.bgColor });
+  o.css("position", "relative");
   processScroll();
  });
 };

-})(jQuery);
\ No newline at end of file
+})(jQuery);