当有一个固定的标题时，可以无限滚动到tbody吗？

Question

我正在做一个小的用户界面来显示比赛的终点。我们的计划是将信息放到一个表格中，以帮助保持所有内容的良好对齐。

function scrolling() {
  $('#scrollup table').animate({
  top: '-=' + $('#scrollup table tr:last').height()
},
1000,
'linear',
function() {
  var offset = $('#scrollup table tr:last').offset().top;
  console.log(offset);
  if (offset <= 1352) {
    $('#scrollup table').css("top", 0);
    $('#scrollup table tr:last').after($('#scrollup table tr:first').detach());
  }
}
  );}
$(document).ready(function() {
  setInterval('scrolling()', 1000)
});

我不知道如何保持头部的固定和保持滚动的流畅。Demo。

Answer 1

只需将以下样式添加到thead

thead{
  position:fixed;
  background:gray;
}

在JS中，当你在动画中detach tr时，只需要detach tbody的tr。

if (offset <= 1352) {
    $('#scrollup table').css("top", 0);
    $('#scrollup table tr:last').after($('#scrollup table tbody tr:first').detach());
    //tbody here
}