Sunday, 31 March 2013

sticky-header.js

I wrote up a little JavaScript plugin over the weekend that has a <table>'s header scroll with the page. What sparked this little endeavour was a question asking for this functionality on Stack Overflow. Since it was fun answering the question, I thought I'd go ahead and make a more general plugin type solution that worked for multiple tables.

Demonstration

Similar to my sortable-table.js plugin, simply add the sticky-header class to a <table> and the functionality will be enabled.

<table class="sticky-header">
  ....
</table>

I've tested it in all the latest browsers and seems to work fine; Chrome, Firefox, Safari, Opera, IE10, IE9 and IE8. No IE7 because it doesn't implement querySelectorAll, the code would be a bit more icky if I used some other method, and you know, it's IE7.

Here is a demonstration on GitHub HTML preview, and be sure to check it out on GitHub!