容器内的粘性标头

Question

我有一个表，位于页面上的容器中。当用户滚动过去时，我试图让表格的标题粘在页面顶部。我尝试了多种方法来使标题具有粘性，但我运气不佳。

表数据正在JS中生成。

任何帮助都会很棒！

超文本标记语言

    <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"

        });

      }

    });

  }

Answer 1

使用 CSS 这非常简单：th {&nbsp; position: sticky;&nbsp; top: 0;&nbsp; background: #eee;}td, th {&nbsp; padding: 10px;}<div class="container">&nbsp; <h1>Some Title</h1>&nbsp;&nbsp;&nbsp; <table>&nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th>Heading 1</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Heading 2</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Heading 3</th>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </thead>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 2</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 3</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 2</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 3</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 2</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 3</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 2</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 3</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 2</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 3</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 2</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 3</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 2</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 3</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 2</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 3</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 2</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 3</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 2</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 3</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </tbody>&nbsp; </table></div>

Answer 2

我相信的立场：粘性；尚未得到所有浏览器的支持。我有一个有点严厉的解决方案，但它适用于所有浏览器。基本上，您使用一个 Div 作为另一个 Div 的掩码。这两个 div 都包含完全相同的表。mask-div 将有效地裁剪表格以仅显示标题。<div class = 'mask-div'>&nbsp; &nbsp;<table>Copy of Table A</table></div><div class='scrolling-div">&nbsp; <table> Table A </table></div><style>div{&nbsp; top:0px;&nbsp; left:0px;}.mask-div{&nbsp; width:100%;&nbsp; position: fixed;&nbsp; height:40px;&nbsp; overflow: hidden;&nbsp; background:white;}<style>

Answer 3

th {&nbsp; position: sticky;&nbsp; top: 0;&nbsp; background: #eee;}td, th {&nbsp; padding: 10px;}<div class="container">&nbsp; <h1>Some Title</h1>&nbsp;&nbsp;&nbsp; <table>&nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th>Heading 1</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Heading 2</th>&nbsp; &nbsp; &nbsp; &nbsp; <th>Heading 3</th>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </thead>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 2</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 3</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 2</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 3</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 2</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 3</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 2</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 3</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 2</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 3</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 2</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 3</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 2</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 3</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 2</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 3</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 2</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 3</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 2</td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Thing 3</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </tbody>&nbsp; </table></div>