Floating iOS-style Table Headers

Along with Josiah Ulfers we implemented a simple method for having sticky table headings. This is a rough demo — better implementation to come.

HTML

<table id="example" border="1" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th>Wide Heading</th>
                <th>Heading</th>
                <th>Thin</th>
                <th>Wide Heading</th>
                <th>Heading</th>
                <th>Thin</th>
                <th>Wide Heading</th>
                <th>Heading</th>
                <th>Thin</th>
                <th>Wide Heading</th>
                <th>Heading</th>
                <th>Thin</th>
                <th>Wide Heading</th>
                <th>Heading</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
            </tr>
            <tr>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
            </tr>
            <tr>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
                <td>cell</td>
            </tr>
         ...

CSS

body {
	        font-family: sans-serif;
	        font-size: 24px;
	    }
	    table {
	        border-collapse: collapse;
	    }
	    th, td {
	        padding: 4px 8px;
	    }
	    th {
	        background-color: #444;
	        color: white;
	    }
	    tbody {
	        background-color: #ddd;
	        color: #444;
	    }
	    tr:nth-child(4n), tr:nth-child(4n+3){
	        background-color: #eee;
	    }
	    thead {
	        position: relative;
	        top: 100px;
	    }
	    tbody tr:hover {
	        background-color: #ddf;
	        cursor: pointer;
	    }

JavaScript

$.fn.sticky = function(){
	        $(this).each( function(){
                var thead = $(this),
                    tbody = thead.next('tbody');

                updateHeaderPosition();
                
                function updateHeaderPosition(){
                    if( 
                        thead.offset().top < $(document).scrollTop()
                        && tbody.offset().top + tbody.height() > $(document).scrollTop()
                    ){
                        var tr = tbody.find('tr').last(),
                            y = tr.offset().top - thead.height() < $(document).scrollTop()
                                ? tr.offset().top - thead.height() - thead.offset().top
                                : $(document).scrollTop() - thead.offset().top;
                        
                        thead.find('th').css({
                            'z-index': 100,
                            'transform': 'translateY(' + y + 'px)',
                            '-webkit-transform': 'translateY(' + y + 'px)'
                        });
                    } else {
                        thead.find('th').css({
                            'transform': 'none',
                            '-webkit-transform': 'none'
                        });
                    }
                }
                
                // see http://www.quirksmode.org/dom/events/scroll.html
                $(window).on('scroll', updateHeaderPosition);
            });
	    }
	    
	    $('thead').sticky();