Question

我有一个包含大量行的HTML表。我希望屏幕上始终可以看到一个特定的行，如果行的实际位置当前从屏幕底部滚动并锁定在页面顶部，则会锁定在页面底部它的位置实际上当前是从屏幕顶部滚动的。虽然行的实际位置在屏幕上可见，但它应该作为表格的一部分正常滚动。

如何使用CSS和JavaScript实现这一目标？

Answer 1

这个例子有点粗糙，但应该给你一些接近你所追求的东西。您需要提供要冻结/锁定课程的<tr>＆＃34;粘贴＆＃34;并将事件附加到文档滚动事件，以监视粘性元素何时进入视图并且切换位置固定。

请参阅此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;
}

函数isScrolledIntoView来自this StackOverflow answer。另外，请注意我正在检查粘性行最近的兄弟（$stickyRow.next()）是否在视图中，因为我将它用作锚点。

Answer 2

如果表格总是高于屏幕，那么只需使用css即可。在如下表格中：

<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>

最后一行的样式会使其粘在页面底部。

编辑：

如果表格大于屏幕，而不是内联样式（或显式css），可以使它只粘在屏幕底部，可以使用简单的javascript来添加这些样式：

<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>

这不是动态的，但可以通过重新检查某个事件的高度来轻松实现。

Answer 3

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

保持HTML表格行在屏幕上永久可见

3 个答案: