Javascript 容器内的粘性头

我有一个表格，它位于页面上的容器中。当用户滚动过去时，我试图让表的标题粘贴到页面顶部。我已经尝试了多种方法使标题粘性，但我没有太多的运气

表数据正在JS中生成

任何帮助都会很好

HTML

offset.top&&scrollTop

使用CSS非常简单：

th{
位置：粘性；
排名：0；
背景：#eee；
}
td，th{
填充：10px；
}

一些头衔
标题1
标题2
标题3
事情1
事情2
事情3
事情1
事情2
事情3
事情1
事情2
事情3
事情1
事情2
事情3
事情1
事情2
事情3
事情1
事情2
事情3
事情1
事情2
事情3
事情1
事情2
事情3
事情1
事情2
事情3
事情1
事情2
事情3

我相信这个位置：粘性；并非所有浏览器都支持

我有一个解决方案，有点笨手笨脚，但它适用于所有浏览器。基本上你使用一个Div作为另一个Div的掩码

这两个div都包含相同的表。 掩码div将有效地裁剪表格以仅显示thead

<div class = 'mask-div'>
   <table>Copy of Table A</table>
</div>

<div class='scrolling-div">
  <table> Table A </table>
</div>

<style>

div{
  top:0px;
  left:0px;
}

.mask-div{
  width:100%;
  position: fixed;
  height:40px;
  overflow: hidden;
  background:white;
}

<style>

表A的副本
不幸的是，这在这种情况下没有任何作用。这是我尝试的第一件事。它对表的影响为0。@您不能在
表
上使用
位置：sticky
、
thead
或
tr
元素；它必须在
th
上。如果单击“运行代码段”按钮，您可以看到它正在工作。很抱歉，响应延迟。有一个过渡正在阻止它在css中工作。一旦我删除了过渡，并添加了粘性的“th”它的工作完美！你真棒！
function generateTableHeader() {
    var headerArray = generateHeaderArray(),

    headerString = "<thead id='head'><tr>" + "<th></th>";

    if (!headerArray.length) {
        $("#head").empty();
        $("#userTable").append("<h1 id='noTicketsFound'>No tickets found.</h1>");
        return;
    }

    headerOrder.forEach(function(key) {
        var isChecked = key;

        if (!$(".dropdown-menu-fixed #" + key).is(":checked")) {
            isChecked += " uncheckedColumn";
        }

        headerString += "<th data-property='" + key + "' class='sortableHeader " + isChecked + "'>" +
        dictionary[key] + "</th>";
    });

    headerString += "</tr></thead>";

    // replaceWith seems faster than separate calls to empty then append.
    $("#head").replaceWith(headerString);

    // Add SORTCLASS to SORTPROPERTY column, since that is already sorted.
    $(".sortableHeader." + SORTPROPERTY).addClass(SORTCLASS);
}

function stickyTableHeader() {
    $(".sticky-table").each(function() {
      var el = $(this),
        offset = el.offset(),
        scrollTop = $(window).scrollTop(),
        stickyHeader = $(".stickyHeader", this);

      if (scrollTop > offset.top && scrollTop < offset.top + el.height()) {
        stickyHeader.css({
          visibility: "visible"
        });
      } else {
        stickyHeader.css({
          visibility: "hidden"
        });
      }
    });
  }

  // DOM Ready
  $(function() {
    var clonedHeaderRow;

    $(".sticky-table").each(function() {
      clonedHeaderRow = $(".sticky-header", this);
      clonedHeaderRow
        .before(clonedHeaderRow.clone())
        .css("width", clonedHeaderRow.width())
        .addClass("stickyHeader");
    });

    $(window)
      .scroll(stickyTableHeader)
      .trigger("scroll");
  });

<div class = 'mask-div'>
   <table>Copy of Table A</table>
</div>

<div class='scrolling-div">
  <table> Table A </table>
</div>

<style>

div{
  top:0px;
  left:0px;
}

.mask-div{
  width:100%;
  position: fixed;
  height:40px;
  overflow: hidden;
  background:white;
}

<style>