Question

我正在尝试制作粘性表标题。以下是我所需要的例子。

以下是我从其他人那里找到的代码。

function makeTableHeadersSticky(tableId) {
var thArr = $(tableId + " th");

var thWidthsArr = [];
$(tableId + " th").each(function(){
    thWidthsArr.push($(this).css("width"));
});

var pos = $(tableId).offset();

var thTop = pos.top + "px";

var count = 0;
$(tableId + " tr:first-child > th").each(function(){
    $(this).css("width", thWidthsArr[count]);
    count++;
});
count = 0;

$(tableId + " tr:last-child > td").each(function(){
    $(this).css("width", thWidthsArr[count]);
    count++;
});

$(window).scroll(function(){
    if($(window).scrollTop() > pos.top) {
        $(tableId + " tr:first-child").css("position", "fixed");
        $(tableId + " tr:first-child").css("top", "0px");
    } else {
        $(tableId + " tr:first-child").css("position", "relative");
        $(tableId + " tr:first-child").css("top", thTop);
    }
});
console.log(thTop);

}

makeTableHeadersSticky("#myTable");

在这里，您可以看到我想要实现的目标JSFiddle

Answer 1

您可以使用CSS将标题修复到顶部，然后在顶部为容器添加边距以防止溢出：

http://jsfiddle.net/n9wac1x6/5/

header {
    width: 100%;
    background-color: #fff;
    height: 50px;
    position: fixed;
    top:0;
    left: 0;
}

h1 {
    position: absolute;
    left: 5px;
    top 2px;
    padding: 0;
    margin: 0;
}

.container {
    margin-top: 50px;
}

如何使标题粘在标题上？

1 个答案: