Very basic jQuery which causes the table header to stick to the top of the screen when it disappears from view.
A Pen by Glenn McComb on CodePen.
Created
February 22, 2015 05:57
-
-
Save lenymo/7bbf185c851d5f90bb36 to your computer and use it in GitHub Desktop.
Sticky THC
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <h1> | |
| Sticky table header cells | |
| </h1> | |
| <table class="sticky-thc"> | |
| <thead> | |
| <tr> | |
| <th>1</th> | |
| <th>2</th> | |
| <th>3</th> | |
| <th>4</th> | |
| <th>5</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>First</td> | |
| <td>First</td> | |
| <td>First</td> | |
| <td>First</td> | |
| <td>First</td> | |
| </tr> | |
| <tr> | |
| <td>Second</td> | |
| <td>Second</td> | |
| <td>Second</td> | |
| <td>Second</td> | |
| <td>Second</td> | |
| </tr> | |
| <tr> | |
| <td>Third</td> | |
| <td>Third</td> | |
| <td>Third</td> | |
| <td>Third</td> | |
| <td>Third</td> | |
| </tr> | |
| <tr> | |
| <td>Fourth</td> | |
| <td>Fourth</td> | |
| <td>Fourth</td> | |
| <td>Fourth</td> | |
| <td>Fourth</td> | |
| </tr> | |
| <tr> | |
| <td>Fifth</td> | |
| <td>Fifth</td> | |
| <td>Fifth</td> | |
| <td>Fifth</td> | |
| <td>Fifth</td> | |
| </tr> | |
| <tr> | |
| <td>Sixth</td> | |
| <td>Sixth</td> | |
| <td>Sixth</td> | |
| <td>Sixth</td> | |
| <td>Sixth</td> | |
| </tr> | |
| <tr> | |
| <td>Seventh</td> | |
| <td>Seventh</td> | |
| <td>Seventh</td> | |
| <td>Seventh</td> | |
| <td>Seventh</td> | |
| </tr> | |
| <tr> | |
| <td>Eighth</td> | |
| <td>Eighth</td> | |
| <td>Eighth</td> | |
| <td>Eighth</td> | |
| <td>Eighth</td> | |
| </tr> | |
| <tr> | |
| <td>Ninth</td> | |
| <td>Ninth</td> | |
| <td>Ninth</td> | |
| <td>Ninth</td> | |
| <td>Ninth</td> | |
| </tr> | |
| <tr> | |
| <td>Tenth</td> | |
| <td>Tenth</td> | |
| <td>Tenth</td> | |
| <td>Tenth</td> | |
| <td>Tenth</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div><!-- .container --> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function(){ | |
| function stickyTHC() { | |
| // Class name of table. | |
| var t = ".sticky-thc"; | |
| var toggleClass = "fixed-header"; | |
| // Top and bottom of the viewport. | |
| var docViewTop = $(window).scrollTop(); | |
| var docViewBottom = docViewTop + $(window).height(); | |
| // console.log("docViewTop: " + docViewTop + "... docViewBottom: " + docViewBottom); | |
| // Top and bottom of the table (relative to the entire document). | |
| var tTop = $(t).offset().top; | |
| var tBottom = tTop + $(t).height(); | |
| // Grab the first row of the tbody. | |
| var firstRow = $(t + " tbody tr:nth-child(1)"); | |
| var spacerClass = "spacer"; | |
| // If the table is in view and the table header is obscured. | |
| if (tTop < docViewTop && tBottom > docViewTop) { | |
| $(t).addClass(toggleClass); | |
| // Count the number of <td>'s in the first row of the table body | |
| var columns = $(t + " tbody tr:nth-child(1) td").length; | |
| // console.log("columns = " + columns); | |
| for (var i = 0; i <= columns; i++) { | |
| // Store a reference to each <td> and <th> as a variable. | |
| var td = t + " tr:nth-child(1) td:nth-child(" + i + ")"; | |
| var th = t + " tr th:nth-child(" + i + ")"; | |
| // Store the <td>'s' width. | |
| var tdWidth = $(td).width(); | |
| // Sets the <th> width to the <td>'s width. | |
| $(th).width(tdWidth); | |
| } | |
| // If the .spacer row hasn't been created yet, create it. | |
| if (!firstRow.hasClass( spacerClass )) { | |
| var spacerHTML = "<tr class=" + spacerClass + "><td> </td><td> </td><td> </td><td> </td><td> </td></tr>"; | |
| $(t + " tbody").prepend(spacerHTML); | |
| } | |
| } else { | |
| // Remove the toggle class. | |
| $(t).removeClass(toggleClass); | |
| // If this spacer class exists, remove it. | |
| if (firstRow.hasClass( spacerClass )) { | |
| $(t + " tbody .spacer").remove(); | |
| } | |
| } | |
| } | |
| $(window).scroll(function() { | |
| stickyTHC(); | |
| }); | |
| $(window).resize(function() { | |
| stickyTHC(); | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| color: #44474a; | |
| } | |
| .container { | |
| font-family: helvetica, arial, sans-serif; | |
| padding: 4em 2em 25em 2em; | |
| position: relative; | |
| } | |
| table { | |
| text-align: center; | |
| width: 100%; | |
| th { | |
| background: #f8f8f8; | |
| font-weight: bold; | |
| } | |
| th, td { | |
| border-bottom: 1px solid #ddd; | |
| margin: 0; | |
| padding: 15px 10px; | |
| } | |
| } | |
| .fixed-header { | |
| thead { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| } | |
| } | |
| @media (min-width: 768px) { | |
| .container { | |
| padding: 10em 5em 20em 5em; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment