Skip to content

Instantly share code, notes, and snippets.

@lenymo

lenymo/Sticky-THC.markdown

Created February 22, 2015 05:57
Show Gist options
  • Save lenymo/7bbf185c851d5f90bb36 to your computer and use it in GitHub Desktop.
Save lenymo/7bbf185c851d5f90bb36 to your computer and use it in GitHub Desktop.
Download ZIP
Sticky THC
Raw
index.html
<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 -->
Raw
script.js
$(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>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</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();
});
});
Raw
Sticky-THC.markdown

Sticky THC

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.

License.

Raw
style.scss
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