jQuery changes class - div disappears in Firefox, fine in Chrome, IE, Safari

Question

Here I have a div in a right sidebar that supposed to act in this way:

1) When you scroll down the page and div reaches the top of the browser screen, it's class changes and it will get fixed on top of the screen untill you reach to the bottom of div's parent element.

2) Once the bottom of div reaches the bottom of parent element, it's class changes back to non-fixed position.

Here is the jsfiddle for you to play with http://jsfiddle.net/comparebest/z2Nyn/1/

Now to the problem:

For some reason in FireFox once div reaches the bottom of parent element, div disappears, while in Chrome, IE and Safari it stays visible.

You might need to make the size of your browser screen smaller in order to observe this behavior.

How can I prevent div from disappearing in FF?

PS:

Heres the jQuery code:

    function fixInParent(selector) {
    var $el = $(selector);

    $(window).scroll(function() {
        if($el.parent().offset().top > $(this).scrollTop())
            $el.addClass('top').removeClass('floating').removeClass('bottom');
        else if ($(this).scrollTop() + $el.height() < $el.parent().offset().top + $el.parent().height())
            $el.addClass('floating').removeClass('top').removeClass('bottom');
        else
            $el.addClass('bottom').removeClass('top').removeClass('floating');
    });
}

$(document).ready(function() {
    fixInParent('#floater');
});​

Answer 1

The problem you're facing is actually very simple and yet kinda annoying. From the specs of CSS 2.1 it states:

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

From w3.org : " 9.3.1 Choosing a positioning scheme: 'position' property "

So even if all other browsers use this value as " expected ", Firefox is not wrong in ignoring it. So you should think of an solution where the parent <td> -element with style="position:relative;" is not the reference for your "floater"-box.

Maybe the answers here can help you:

" Does Firefox support position: relative on table elements? "

Answer 2

the problem is Firefox's support for relative positioning on table-cells. See: Does Firefox support position: relative on table elements?

Your fix :
Apply position:relative to the containing <table> tag, so that the table is the positioning context, instead of the cell.

This should work in your situation because you only have one row of cells, and they have the same bottom as the table. I was able to get this to work on your site in Firebug; though not in your fiddle, because in that example, the cell is not aligned with the table bottom.