容器内的粘性标头
我有一个表，位于页面上的容器中。当用户滚动过去时，我试图让表格的标题粘在页面顶部。我尝试了多种方法来使标题具有粘性，但我运气不佳。
表数据正在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"
});
}
});
}
牛魔王的故事3回答
-
慕姐8265434
使用 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> -
猛跑小猪
我相信的立场：粘性；尚未得到所有浏览器的支持。我有一个有点严厉的解决方案，但它适用于所有浏览器。基本上，您使用一个 Div 作为另一个 Div 的掩码。这两个 div 都包含完全相同的表。mask-div 将有效地裁剪表格以仅显示标题。<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> -
料青山看我应如是
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>
随时随地看视频慕课网APP
相关分类
Html5