javascript - jquery 粘性th

Question

我正在为放置在页面中间和底部的表格制作一个粘性标题。在大多数情况下，我有这个工作，但我无法弄清楚如何正确定位标题。

我已经尝试过固定位置，但是在框外滚动存在问题，标题宽度和粘性的绝对混乱似乎将标题插入表格并弄乱了格式。

有任何想法吗？

    function stickyTableHead(tableID) {
  var $tmain = $(tableID);
  var $parent = $(tableID).parent();
  var pos = $parent.offset().top + $tmain.find(">thead").height();
  var $tScroll = $tmain.children("thead")
    .clone()
    .wrapAll('<table id="tScroll" />')
    .parent()
    .addClass($(tableID).attr("class"))
    .css("position", "sticky")
    .css("top", 0)
    .css("display", "none")
    .prependTo($tmain);


  $($parent).scroll(function() {
    var dataScroll = $tScroll.data("scroll");
    dataScroll = dataScroll || false;
    if (jQuery(this).scrollTop() >= $tmain.find(">thead").height()) {
      if (!dataScroll) {
        $tScroll
          .data("scroll", true)
          .show()
          .find("th").each(function() {
            $(this).width($tmain.find(">thead>tr>th").eq($(this).index()).width());
          });
      }
    } else {
      if (dataScroll) {
        $tScroll
          .data("scroll", false)
          .hide();
      }
    }
  });
}

$(document).ready(function() {
  stickyTableHead('#transactionT');
});

例如，JsFiddle 因为这里的文本编辑器太长了 https://jsfiddle.net/zazvorniki/7g245fr6/54/

标签： javascriptjquerysticky