lolocoo · December 13, 2016 00:24
diff --git a/persistant-header.html b/persistant-header.html
 <!DOCTYPE html>
 <html>

 <head>
 	<meta charset="UTF-8">
 	
 	<title>Table with Persistent Headers</title>
 	
 	<link rel="stylesheet" href="css/style.css">
 	
 	<style>
    .floatingHeader {
      position: fixed;
      top: 0;
      visibility: hidden;
    }
 	</style>
 	
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script>
    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");
       
    });
  </script>
 </head>

 <body>

 	<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">
        <thead>
          <tr class="persist-header">
             <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>
          <tr>
             <td>table1 data10</td>
             <td>table1 data10</td>
          </tr>
        </tbody>
      </table>
              
      <section class="some-other-area persist-area">
      
        <h2 class="persist-header">Some Other Area</h2>
      
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
      
      </section>
      
      <section class="some-other-area persist-area">
      
        <h2 class="persist-header">Some Other Area</h2>
      
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
      
      </section>
    
 	</div>
 	
 </body>

 </html>