Sticky tables

Question

I am trying to implement a calendar list view like iOS. Basically, what I'm doing now is the loop of my array of events. If this is a new date, print the date header, otherwise print the calendar event. I want to make the DATE HEADER lines sticky until they are scrolled.

How can i achieve this? I see many examples on sticky headers, but there is no actual one that applies this sticky function only to table rows. My <table also placed in its own scrollable fixed height, and I want the header to be inserted at the top of the <div> instead of top:0;

I put my code in the pen at http://codepen.io/anon/pen/zxpkr , and now I am left with the colspan fix because my <td> does not spread over the cells and gets the value <tr> at the top of the <div> .

Answer 1

I had to wrap the scrollable div with a div container and play a bit with if statements, but it works.

Working example

Js

 function stickyTitles(stickies) { this.load = function () { stickies.each(function () { var thisSticky = jQuery(this).wrap('<div class="followWrap" />'); thisSticky.parent().height(thisSticky.outerHeight()); jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top); }); }; this.scroll = function () { stickies.each(function (i) { var thisSticky = jQuery(this), nextSticky = stickies.eq(i + 1), prevSticky = stickies.eq(i - 1), pos = jQuery.data(thisSticky[0], 'pos'), h = $('.mytable').offset().top; if (pos <= jQuery('.mytable').scrollTop() + h) { thisSticky.addClass("fixed"); if (nextSticky.length > 0 && jQuery('.mytable').scrollTop() + h >= jQuery.data(thisSticky[0], 'pos') - prevSticky.outerHeight()) { thisSticky.addClass("absolute").css("top", jQuery.data(nextSticky[0], 'pos') - $('.mytable').scrollTop() - prevSticky.outerHeight() - h); } } else { thisSticky.removeClass("fixed"); if (prevSticky.length > 0 && jQuery('.mytable').scrollTop() + h <= jQuery.data(thisSticky[0], 'pos') - prevSticky.outerHeight()) { prevSticky.removeClass("absolute").removeAttr("style"); } } }); }; } jQuery(document).ready(function () { var newStickies = new stickyTitles(jQuery(".followMeBar")); newStickies.load(); jQuery('.mytable').on("scroll", function () { newStickies.scroll(); }); }); 

CSS

 body { height:2000px; margin: 0; background: #333; color: #fff; overflow: auto; } table { width: 100%; } table tr { height: 100px; } .followMeBar { display: block; background: #222; border-bottom: solid 1px #111; border-top: solid 1px #444; position: relative; z-index: 1; width: 200%; } .followMeBar.fixed { position: absolute; top: 0; width: 90%; z-index: 0; } .followMeBar.fixed.absolute { position: absolute; } .mytable { overflow-y: scroll; height: 250px; } #hidden { overflow:hidden; position:absolute; width:100%; } 

HTML

 <h1>Test</h1> <p>My table in a div below...</p> <div id="hidden"> <div class='mytable'> <table> <tr class='followMeBar'> <td colspan="4">12-07-2013</td> </tr> <tr> <td>4:35 PM</td> <td>1729</td> <td>2</td> <td>jack</td> </tr> <tr> <td>4:40 PM</td> <td>KSKS</td> <td>4</td> <td>jason</td> </tr> <tr> <td>5:35 PM</td> <td>1714</td> <td>4</td> <td>raymond</td> </tr> etc... </table> </div> </div> 

Note that this method was based on this answer , I had to adjust it a bit to make it work for a scrollable div, but I want to give a loan in which a loan should be provided.

Answer 2

Replaced all div table and tr s, added some styles, and it works: P

Code: Codepen

Instead, it ends the entire tr header with a div . This is not permitted by the specifications, but it works.

Answer 3

Instead of making the absolute position of the row, which may not work very well in browsers, I would rather have a table at the top that works like the head of the table (and adheres to the top of the parent div) and has the data table scroll below it.

You don't even need to use jQuery for this!

http://jsbin.com/ucevuy/1/edit

 * { margin:0; padding:0; } div { border:solid red; height:300px; overflow:auto; } table { width:400px; } td { border:solid black 1px; width:50%; } .head { position:absolute; top:0; background-color:#fff; } .data { margin-top:20px; }