Question

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>

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?

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?

Answer 1

.offset() + .scrollTop() = DISCO

Basically (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);

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.

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