logo标签列表

粘性表头

jquerystickytableheader
3
我正在使用该插件来实现我在表格中粘性表头的效果。就像在插件示例和我的页面中一样，表头会在表格中最后一行消失后再消失一段时间。我想让我的表头在最后一行消失时立即消失，有没有办法实现这个要求？
5个回答
4
这里有一个可行的示例：fiddle 我所做的改变只是这一行的结尾：
if ((scrollTop > offset.top) && (scrollTop < offset.top + $this.height()-base.$clonedHeader.height())) {
你应该发起一个拉取请求。 - PiTheNumber
嘿，vonflow，我认为你说得对，你能更好地解释一下你是如何解决这一行的吗？我只是简单地复制了Jsfiddle中的代码，并且在我的项目中似乎也可以工作。我将在Github上发起一个pull request并提到你的名字。谢谢。 - Koala7
我刚刚弄明白了如何进行拉取请求，所以我正准备把它放进去。 - vonflow
很酷，我会在 GitHub 上等待你的解释。完成后告诉我。 - Koala7
实际上这并不复杂，它只是在确定是否隐藏标题时考虑了标题的高度。 - vonflow
2

This can be achieved with div tables.

.td.header {
  position: sticky;
  top:0px;
}

查看这个jsfiddle，它提供了一个简单的例子。

编辑：

直觉告诉我们需要添加

Original Answer翻译成"最初的回答"

position: sticky;

一次加到表格行并不起作用。必须将其添加到每个要成为标题单元格的表格单元格中，这样就可以解决问题。

Original Answer翻译成：最初的回答

1
我知道这篇文章有点老，但我觉得贡献一些东西可能会对某些人有所帮助...
对于动态表格（每个单元格的宽度都是预先计算的），此插件会使标题行的宽度混乱。
我进行了一些更改，根据第一个tbody行中的每个outerWidth从单元格计算宽度。
首先，在插件中注释掉当前的宽度计算。
base.updateWidth = function () {
        // Copy cell widths and classes from original header
        $('th', base.$clonedHeader).each(function (index) {
            var $this = $(this);
            var $origCell = $('th', base.$originalHeader).eq(index);
            this.className = $origCell.attr('class') || '';
            //$this.css('width', $origCell.width());
        });

        // Copy row width from whole table
        //base.$clonedHeader.css('width', base.$originalHeader.width());
    };

    // Run initializer
    base.init();

然后在base.toggleHeaders = function ()的结尾添加以下内容：
// Set cell widths for header cells based on first row's cells
var firstTr = $this.children("tbody").children("tr").first();
var iCol = 0;
$(firstTr).children("td:visible").each(function() 
{
    var colWidth = $(this).outerWidth();
    console.log(colWidth.toString());
    var headerCell = $this.children("thead.tableFloatingHeader").children("tr").children("th:eq(" + iCol + ")");
    var firstRowCell = $this.children("tbody").children("tr:first").children("td:eq(" + iCol + ")");
    $(headerCell).outerWidth(colWidth);
    $(firstRowCell).outerWidth(colWidth);

    iCol++;
});
1
谢谢，我想我必须更换插件，我不能依赖它，我自己无法修复它。 - Koala7
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接