内容太大时需要粘页眉和页脚 [英] need sticky header and footer when content is too large

问题描述

我使用div创建了一个自定义表(由于行为过于复杂，这只是解决方案).但是我对页眉和页脚有疑问.

表html基本上很简单:

I created a custom table using div's (was only solution due too complex behaviour). But I have a problem with the header and the footer.

The table htmlis basically simple:

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

我需要的是以下内容:当表格中的内容不是太大而无法在没有滚动条的情况下查看时，标题将仅位于内容的顶部，而页脚将位于内容的下方(因此不会粘在容器的底部) ).
但是，当表的内容扩展时(无论是在页面加载新数据还是通过使用javascript/jQuery扩展某些表内容)，我都需要页眉停留在容器的顶部，而页脚停留在底部内容可以滚动而不会与页眉/页脚重叠的容器.

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

What I need is the following: when the content inside the table is not too large to be viewed without scrollbar the header will just be at the top and the footer just below the content (so not sticky to the bottom of the container).
But when the content of the table expands (either on page load with new data or by expanding some table content using javascript/jQuery) I need the header to stick at the top of the container and the footer stick at the bottom of the container while the content can scroll without overlapping the header/footer.

I searched around a lot on this but haven't found a decent solution, is there a way to solve this (as simple as possible) using css and/or javascript/jquery?

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

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

Edit Here a basic sample of what I mean: jsFiddle

If you click the span in the example the header and footer should become fixed at the top and bottom of the container. But how do I detect the increase in size?

推荐答案

.offset() + .scrollTop() = 基本上( jsfiddle演示):

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上，否则将其放回表格的顶部.根据网站其余部分的内容，您可能还需要检查是否一直滚动到表格之外，否则您就不希望标题保持可见状态.

In other words, if the top of the table is above the scrollTop, then position the header at scrollTop, otherwise put it back at the top of the table. Depending on the contents of the rest of the site, you might also need to check if you have scrolled all the way past the table, since then you don't want the header to stay visible.

也不要忘记 $(window).height() 对于页脚所做的相同操作.

And don't forget about $(window).height() for doing the same with the footer.

这篇关于内容太大时需要粘页眉和页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！