JSFiddle - React, Tailwind, and code Playground

by Eric Howe

HTML

<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2.js"></script>
<script src="https://github.com/NV/jquery_viewport/raw/gh-pages/jquery.viewport.js"></script>
<table class="scrollTable">
    <thead>
        <tr class="alwaysVisible">
            <th>Row name</th>
            <th>Content</th>
        </tr>
        <tr class="alwaysVisible">
            <th>Row 2</th>
            <th>Row 2</th>
        </tr>
    </thead>
    <tbody>
        <script type="text/javascript">
            for(var i = 0; i < 50; ++i)
            {
            document.writeln("<tr><td>Row " + i + "</td><td>Content</td></tr>");
            }
            </script>
            </tbody>
            <tfoot>
                <tr>
                    <td>Footer</td>
                    <td>Footer 2</td>
                </tr>
            </tfoot>
            </table>
            <div id="testContainer">TEST CONTAINER</div>

CSS

table th, table td
{
    border: 1px solid #000;
    padding: .3em;
}
.alwaysVisible
{
    background: #F66;
}

JavaScript

function makeVisibleWhatMust() {
  // Ignore the event if we're doing the scrolling.
  if(makeVisibleWhatMust.isScrolling)
    return;
  $('#testContainer').text( $('#testContainer').text() + 'called\n');
  $('table.scrollTable').each(function() {
      var table = this;
      $($('tr.alwaysVisible', table).get().reverse()).each(function() {
        $(this).insertAfter( $('tr:in-viewport:not(.alwaysVisible)', table)[0] );
      });
      makeVisibleWhatMust.isScrolling = true;
      $(window).scrollTo($('tr.alwaysVisible')[0], {
          onAfter: function() { makeVisibleWhatMust.isScrolling = false; }
      });
    }
  );
}
makeVisibleWhatMust.isScrolling = false;

$(window).bind('scroll', makeVisibleWhatMust);