容器内的标头

Question

我有一个表放在页面的容器中。当用户滚动过去时，我试图将表的标题粘贴到页面的顶部。我尝试了多种方法使标头具有粘性，但运气不佳。

表数据正在JS中生成。

任何帮助都会很棒！

HTML

    <div class="container-fluid">
<div id="userTable" class="sticky-table">
        <table id="ticketsTable">
            <thead id="head" class="sticky-header"</thead>
            <tbody id="body">
            </tbody>
        </table>
    </div>
</div>

JavaScript

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");
  });

Answer 1

使用CSS非常简单：

th {
  position: sticky;
  top: 0;
  background: #eee;
}

td, th {
  padding: 10px;
}

<div class="container">
  <h1>Some Title</h1>
  
  <table>
    <thead>
      <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
      </tr>
    </thead>
    
    <tbody>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
      <tr>
        <td>Thing 1</td>
        <td>Thing 2</td>
        <td>Thing 3</td>
      </tr>
    </tbody>
  </table>
</div>