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?

P.S:

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');
});

score 4 · Answer 1 · edited May 23 '17 at 11:48

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?"

score 2 · Accepted Answer · edited May 23 '17 at 12:18

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.

edited May 23 '17 at 12:18

Community

1
1

answered Oct 19 '12 at 23:35

Faust

15,130
9
54
111

Unfortunately `position:relative` is not enough, as the class `bottom` places the div really at the bottom of the table - at the end of the blue part. So another value has to be set, too. But still, good and almost same answer as mine. :) – insertusernamehere Oct 19 '12 at 23:40
@insertusernamehere: That's true for the fiddle, but in the actual site (looks like Acidon removed the link he originally posted), the cell extends to the bottom of the table in a single row. – Faust Oct 19 '12 at 23:42
Ah pretty cool - I didn't check it on the actual site. So, my bad. It's always fun, when somebody is writing/trying the same things at a time. :) – insertusernamehere Oct 19 '12 at 23:44
Your fix helped me to eliminate the problem in firefox! :) I went through the whole site and updated the code, looks great, however I am having weird problem on this page http://bit.ly/QDhrz8 , for some reason div shifts right on the scroll :( – Acidon Oct 19 '12 at 23:59

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

2 Answers2