javascript - HTML - 无法让标题在滚动中保持固定

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，我会验证这个预感。