内容太大时需要粘性页眉和页脚

Question

我使用div's 创建了一个自定义表（由于行为过于复杂，这是唯一的解决方案）。但是我的页眉和页脚有问题。

表html基本简单：

<div class="table">
  <div class="header"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

我需要的是以下内容：当表格内的内容不是太大而无法在没有滚动条的情况下查看时，页眉将位于顶部，页脚位于内容下方（因此不会粘在容器的底部)。
但是当表格的内容扩展时（在页面加载新数据或通过使用javascript/jQuery 扩展某些表格内容）我需要将页眉粘贴在容器顶部，将页脚粘贴在底部容器，而内容可以滚动而不重叠页眉/页脚。

我对此进行了很多搜索，但没有找到合适的解决方案，有没有办法使用css 和/或javascript/jquery 来解决这个问题（尽可能简单）？

编辑 这是我的意思的基本示例：jsFiddle

如果单击示例中的span，页眉和页脚应该固定在容器的顶部和底部。但是如何检测尺寸的增加？

Answer 1

这完全违反了语言的语义，因此它可能会完全破坏所有可访问性。请改用 HTML 表格。

<table id="mahTable" summary="some descriptive summary">
    <caption>This descriptive data visually appears outside your table.</caption>
    <thead>
        <tr><th>Header Cell</th><th>Other header cell</th></tr>
    </thead>
    <tbody>
        <tr><td>data 1</td><td>data 2</td></tr>
    </tbody>
    <tfoot>
        <tr><td colspan="2">footer here</td></tr>
    </tfoot>
</table>

要说这在您当前的代码/编程中是不可能的，意味着您完全需要重新考虑您的方法。首先获取正确的 HTML，然后再找出演示文稿。如果您在解决内容的需求或结构之前就忙于演示，那么您的演示很可能会失败。

Answer 2

.offset() + .scrollTop() = DISCO

基本上（jsfiddle demo）：

function placeHeader(){ 
    var $table  = $('#table');  
    var $header = $('#header'); 
    if ($table.offset().top <= $(window).scrollTop()) {
        $header.offset({top: $(window).scrollTop()});
    } else { 
        $header.offset({top: $table.offset().top}); 
    }    
}

$(window).scroll(placeHeader);

换句话说，如果表格的顶部在scrollTop之上，则将标题定位在scrollTop，否则将其放回表格顶部。根据站点其余部分的内容，您可能还需要检查您是否一直滚动到表格之外，因为那时您不希望标题保持可见。

别忘了$(window).height() 对页脚也做了同样的事情。