JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-condensed table-bordered">
  <thead>
    <tr>
      <th>col1</th>
      <th>col2</th>
      <th>col3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
  </tbody>
</table>
<div id="bottomAnchor"></div>
<div id="clonedHolder"></div>

CSS

body {
  height: 5000px
}
th, td {
  background-color: #fff;
}

JavaScript

function moveScroll() {
	var realTable = $('table');
	var lastTobody = realTable.find('tbody:last-child');
  var scroll = $(window).scrollTop() + realTable.find('thead').outerHeight();
  var topLimit = realTable.offset().top;
	var bottomLimit = lastTobody.offset().top + lastTobody.outerHeight();
  if (scroll > topLimit && scroll < bottomLimit) {
		clonedTable = $('#clonedTable');
		if (clonedTable.length == 0) {
			clonedTable = realTable.clone();
			clonedTable.attr('id', 'clonedTable');
			clonedTable.css({
				'width': realTable.width(),
				'visibility': 'hidden',
				'position': 'fixed',
				'pointer-events': 'none',
				'top': 0
			});
			$('#clonedHolder').append(clonedTable);
			$('#clonedTable thead').css({
				visibility: 'visible'
			});
		}
	} else {
		$('#clonedTable').remove();
    }
}

$(window).scroll(moveScroll);