JSFiddle - React, Tailwind, and code Playground

by freedawirl

HTML

<div id="tablecontainer">
    
<table id="mytable">
<thead>
<tr>
  <th>Firstname</th>
  <th>Lastname</th> 
</tr>
 </thead>
 <tbody>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>   
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
  <tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
</tr>    
</tr>
</tbody>
</table>


<table id="mytable">
<thead>
<tr>
  <th>Head1</th>
  <th>Head2</th> 
  <th>Head3</th>
  <th>Head4</th> 
</tr>
 </thead>
 <tbody>
<tr>
  <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>
<tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>   
<tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>
<tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>
<tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>
<tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
  <tr>
   <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>
<tr>
  <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>
<tr>
  <td>12</td>
  <td>13</td>
  <td>14</td>
  <td>15</td> 
</tr>    
</tr>
</tbody>
</table>

<table id="header-fixed"></table>
</div>

CSS

body { height: 1000px; }
#header-fixed { 
    display:none;
    position: fixed; 
    top: 0px; 
    background-color:white;
}
#mytable {
    float:left;
}
#header-fixed thead {
	float:left;
}

JavaScript

var tableOffset = $("#mytable").offset().top;
var $header = $("#mytable > thead").clone();

var $fixedHeader = $("#header-fixed").append($header);



$(window).bind("scroll", function() {
    var offset = $(this).scrollTop();
    
    if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
        $fixedHeader.show();
    }
    else if (offset < tableOffset) {
        $fixedHeader.hide();
    }
});