Question

我使用了来自here的答案中的逻辑来实现应该保留的固定标头，而其余的表格会滚动。我尝试了一些其他的插件，但没有一个正常工作，所以我几乎放弃了。

我使用此代码重新调整我的表格（它们通常是巨大的）以适应可见区域：

   var buttonDist = jQuery("#resizableTable").position().top - jQuery("#tglTblScrollLock").position().top;
   document.getElementById('resizableTable').style.width = (visWidth) +'px';
   document.getElementById('resizableTable').style.height = (visHeight * 0.95) - buttonDist - menuOffset +'px';
   document.getElementById('resizableTable').style.display = 'block';

然后我这样做了（就像在链接中一样）

        var tableOffset = jQuery("#resizableTable").offset().top;
        var header = jQuery("#resizableTable > thead").clone();
        var fixedHeader = jQuery("#resizableTable").clone()

        fixedHeader.css({'position':'absolute', 'top': jQuery("#resizableTable").position().top, 'display':'none'});
        fixedHeader.attr("id",'fixedHeader');

        jQuery("#tab1").append(fixedHeader);
        jQuery('#fixedHeader > tbody').remove();
        jQuery('#fixedHeader > tfoot').remove();

        jQuery("#resizableTable > thead").bind("scroll", function() {
            var offset = jQuery(this).scrollTop();
            if (offset >= tableOffset && fixedHeader.is(":hidden")) {
                fixedHeader.show();
            }
            else if (offset < tableOffset) {
                fixedHeader.hide();
            }    
        });

这是一个问题。 jQuery("#resizableTable > thead").bind("scroll", function() {无效。它甚至没有被调用 - 如果我更换部件以检查window中的滚动它是否有效，但不是这样。我究竟做错了什么？

Answer 1

我怀疑你实际上是在滚动thead，你可能在其他地方滚动，因此thead元素本身内部没有溢出滚动...

粘贴一个jsFiddle，我将验证该预感。

HTML - 无法在滚动中获得标题以保持固定

1 个答案: