kingkool68 / stickyheader

Makes table headers stick to the top of the viewport when scrolling down HTML data tables.

stickyHeader.js makes table headers stick to the top of the viewport when scrolling down long HTML data tables. Slides for the presentation I gave at the September DC jQuery Meetup can be found at http://www.slideshare.net/kingkool68/stickyheaderjs

Versions for

• jQuery
• Prototype
• Moo Tools
• Dojo Toolkit

To get started just include:

0. stickyHeader.js
1. The two CSS rules to your stylesheet
2. class="stickyHeader" to any table that you want to have a stickyHeader

CSS Rules

    .hide {
        display:none;
    }
    div.stickyHeader {
        top:0;
        position:fixed;
        _position:absolute;
    }

Demos

• http://dev.kingkool68.com/stickyHeader/jquery.htm
• http://features.pewforum.org/muslim-population/?sort=Pop1990&order=ASC

stickyheader's Issues

cell with padding

There is a resizing problem when header cells contains padding.
for the jquery version;
cellWidths[i] = $(headerCells[i]).width();
should be
cellWidths[i] = $(headerCells[i]).innerWidth();

Improvements to this plugin

• In stickyheader.jquery.js, add a setTimeout of 1 second inside the document ready to allow tables to load before using the stick header.
• take contents of window scroll action and move it into a function that is called in the page load, as well as on the scroll action.

Accessibility Issue

Edit: Initial comment was after seeing only the slideshare description

After reviewing the demo I like that the original table is kept in tact and only the headers cloned. There's still an issue of the headers basically existing on their own. Wondering if, perhaps, aria-hidden could be used to allow the cloned headers to be ignored.

Would require testing.

Add a license

Would love to use your code, but, I can't without a license!