Keep an HTML table row permanently visible on the screen

Question

I have an HTML table with a large number of rows. I would like one particular row to be visible on the screen at all times, locked at the bottom of the page if the row's actual position is currently scrolled off the bottom of the screen and locked at the top of the page if it's position is actually currently scrolled off the top of the screen. While the row's actual position is visible on the screen then it should scroll normally as part of the table.

How can I achieve this using CSS and JavaScript?

Answer 1

This example is kind of crude but should give you something close to what you are after. You would need to give the <tr> you want to freeze/lock the class "sticky" and attach an event to the document scroll event to monitor when the sticky element comes into view and toggle position fixed.

See this fiddle

JS

$(function() {

  $(document).scroll(function() {
    var $stickyRow = $('tr.sticky'),
        $anchor = $stickyRow.next();

    $stickyRow.removeClass('fixed top bottom');

    if (!isScrolledIntoView($anchor)) {
      var orientation = ($anchor.offset().top < $(window).scrollTop()) ? 'top' : 'bottom';
      $stickyRow.addClass('fixed ' + orientation);
    }
  });

});

function isScrolledIntoView($elem) {
  var $window = $(window);

  var docViewTop = $window.scrollTop();
  var docViewBottom = docViewTop + $window.height();

  var elemTop = $elem.offset().top;
  var elemBottom = elemTop + $elem.height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

CSS

tr.fixed {
  position: fixed;
  bottom: 0;
}

tr.fixed.bottom {
  bottom: 0;
}

tr.fixed.top {
  top: 0;
}

The function isScrolledIntoView comes from this StackOverflow answer. Also, note I am checking if the sticky rows closest sibling ($stickyRow.next()) is in view because I am using it as an anchor point.

Answer 2

If the table will always be taller than the screen, you do this with just css. In a table such as:

<table>
        <tr>
            <td>one</td>
            <td>two</td>
            <td>three</td>
            <td>four</td>
            <td>five</td>
        </tr>
        <tr style="position: fixed; bottom: 0;">
            <td>sticky one</td>
            <td>sticky two</td>
            <td>sticky three</td>
            <td>sticky four</td>
            <td>sticky five</td>
        </tr>
</table>

The style on the last row will make it stick to the bottom of the page.

EDIT:

To make this only stick to the bottom of the screen if the table is larger than the screen, instead of the inline style (or explicit css), simple javascript can be used to add those styles:

<script>
    var table = document.getElementById('table')
    if (window.innerHeight < table.offsetHeight) {
        var lastrow = document.getElementById('lastrow')
        lastrow.style.position = "fixed"
        lastrow.style.bottom = 0
    }
</script>

This isn't dynamic, but could be easily made so by rechecking the height on some event.

Answer 3

.TableId tbody tr:last-child td {
    position: sticky;
    background-color: #67809f;
    bottom: 0;
}