容器内的粘性 header

Question

我有一个 table 在页面的容器中。当用户滚动过去时，我试图让 table 的 headers 坚持到页面顶部。我尝试了多种方法来使 headers 变粘，但我运气不佳。

正在用 JS 生成 table 数据。

任何帮助都会很棒！

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

使headers粘在滚动功能上

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>

Answer 2

我相信position:sticky；尚未被所有浏览器支持。

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

这两个 div 都包含完全相同的 table。 mask-div 将有效裁剪 table 以仅显示 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>

Answer 3

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>

容器内的粘性 header

Sticky header inside a container

html

javascript

css

sticky