jquery - ページ スクロールの固定 THEAD を TABLE または特定の DIV の高さまで制限する

Question

私は比較表を設定していますが、テキストが非常に長いため、ユーザーが下にスクロールしたときに 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();
});
});