Floating Header

http://css-tricks.com/13465-persistent-headers/

by Kaleb Hornsby

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div id="demo-top-bar">
    <div id="demo-bar-inside">
        <h2 id="demo-bar-badge">CSS-Tricks Example</h2>
        <div id="demo-bar-buttons">
            <a class="header-button" href="/13465-persistant-headers/">← Back to Article</a>
            <a class="header-button" href="/examples/">More Demos →</a>
        </div>
        <div id="demo-bar-ad">
            <div id="bsap_1255488" class="bsarocks bsap_3469a2a501a9e18091036aa0c89f9dcb"></div>
            <a href="http://adpacks.com" id="bsap_aplink">via Ad Packs</a>
        </div>
    </div>
</div>
<div id="page-wrap">
    <h1>Persistent Headers</h1>
    <p>Scroll down and watch the table headers stay with the table when they normally would be scrolled off the screen.</p>
                
    <table class="persist-area" id="pa1">
        <thead>
          <tr class="persist-header" id="ph1">
             <th>Column One Header</th>
             <th>Column Two Header</th>
          </tr>
        </thead>
        <tbody>
          <tr>
             <td>table1 data1</td>
             <td>table1 data1</td>
          </tr>
          <tr>
             <td>table1 data2</td>
             <td>table1 data2</td>
          </tr>
          <tr>
             <td>table1 data3</td>
             <td>table1 data3</td>
          </tr>
          <tr>
             <td>table1 data4</td>
             <td>table1 data4</td>
          </tr>
          <tr>
             <td>table1 data5</td>
             <td>table1 data5</td>
          </tr>
          <tr>
             <td>table1 data6</td>
             <td>table1 data6</td>
          </tr>
          <tr>
             <td>table1 data7</td>
             <td>table1 data7</td>
          </tr>
          <tr>
             <td>table1 data8</td>
             <td>table1 data8</td>
          </tr>
          <tr>
             <td>table1 data9</td>
             <td>table1 data9</td>
          </tr>
         ...

CSS

.floatingHeader {
    position: fixed;
    top: 0;
    visibility: hidden;
}

*    { 
  margin: 0; 
  padding: 0; 
}
body { 
  font: 14px Georgia, serif; 
}
h1 {
  font: 32px Georgia, Serif;
  margin: 0 0 20px 0;
}
p {
  margin: 0 0 20px 0;
}
#page-wrap { 
  width: 500px; 
  margin: 100px auto; 
}
.spacer { 
  height: 600px; 
}
table {
  border-collapse: collapse;
}
th { 
  background-color: lightgrey; 
  padding: 10px; 
  width: 200px; 
  text-align: left;
}
tr:nth-child(odd) {
  background: #eee;
}
td { 
  padding: 10px; 
  width: 200px; 
}

.some-other-area {
  margin: 300px 0;
  line-height: 2;
}
h2 {
  background: lightgrey;
  padding: 10px;
  font: 28px Georgia, Serif;
  margin: 0 0 20px 0;
}

JavaScript

function updateTableHeaders() {
    var el, offset, scrollTop, floatingHeader;
    for(var i = 0, len = persist_areas.length; i < len; i++) {
        el = document.getElementById('pa' + (i + 1));
        offset = 
    }
}

function UpdateTableHeaders() {
    $(".persist-area").each(function() {

        var el = $(this),
            offset = el.offset(),
            scrollTop = $(window).scrollTop(),
            floatingHeader = $(".floatingHeader", this)

            if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
                floatingHeader.css({
                    "visibility": "visible"
                });
            } else {
                floatingHeader.css({
                    "visibility": "hidden"
                });
            };
    });
}

// DOM Ready      
$(function() {

    var clonedHeaderRow;

    $(".persist-area").each(function() {
        clonedHeaderRow = $(".persist-header", this);
        clonedHeaderRow.before(clonedHeaderRow.clone()).css("width", clonedHeaderRow.width()).addClass("floatingHeader");

    });

    $(window).scroll(UpdateTableHeaders).trigger("scroll");

});