1

我正在设置一个比较表并希望在用户向下滚动时修复 THEAD，因为它的文本很长。

我在这里找到了解决方案https://stackoverflow.com/a/9669008/1463443。它可以按需要工作。

但是，由于我的页面页脚很庞大 - 进一步向下滚动仍然会显示表格内容之外的固定 THEAD。

我想将这个固定的 THEAD 限制在这个桌子高度，或者最好限制在 #CONTENT div id （不应该在 #Footer 上看到）

这是我正在使用的代码

CSS

table.entries {width: 100%;border-spacing: 0px;margin:0;}
table.entries thead.fixed {position:fixed;top:0;}

Javascript

TableThing = function(params) {
settings = {
    table: $('#table'),
    thead: []
};

this.fixThead = function() {
    // empty our array to begin with
    settings.thead = [];
    // loop over the first row of td's in <tbody> and get the widths of individual <td>'s
    $('tbody tr:eq(1) td', settings.table).each( function(i,v){
        settings.thead.push($(v).width());
    });

    // now loop over our array setting the widths we've got to the <th>'s
    for(i=0;i<settings.thead.length;i++) {
        $('thead th:eq('+i+')', settings.table).width(settings.thead[i]);
    }

    // here we attach to the scroll, adding the class 'fixed' to the &lt;thead> 
    $(window).scroll(function() {
        var windowTop = $(window).scrollTop();

        if (windowTop > settings.table.offset().top) {
            $("thead", settings.table).addClass("fixed");
        }
        else {
            $("thead", settings.table).removeClass("fixed");
        }
    });
}
}
$(function(){
var table = new TableThing();
table.fixThead();
$(window).resize(function(){
    table.fixThead();
});
});

4

0 回答 0