jQuery更改类-div在Firefox中消失，在Chrome，IE，Safari中很好

Question

在这里，我在右侧栏中有一个div，它应该以这种方式起作用：

1）当您向下滚动页面并且div到达浏览器屏幕的顶部时，它的类将更改，并且它将固定在屏幕顶部，直到您到达div的父元素的底部。

2）一旦div的底部到达父元素的底部，它的类就会变回非固定位置。

这是jsfiddle，供您使用http://jsfiddle.net/comparebest/z2Nyn/1/

现在解决问题：

由于某些原因，在div中，一旦div到达父元素的底部，div就会消失，而在Chrome，IE和Safari中它仍然可见。

您可能需要减小浏览器屏幕的大小，才能观察到此现象。

如何防止div在FF中消失？

PS：

继承人的jQuery代码：

    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

您面临的问题实际上非常简单，但是有点烦人。 根据CSS 2.1的规范，它指出：

'position：relative'对table-row-group，table-header-group，table-footer-group，table-row，table-column-group，table-column，table-cell和table-caption元素的影响未定义。

来自w3.org ：“ 9.3.1选择定位方案：“ position”属性 ”

因此，即使所有其他浏览器都将此值用作“ 期望值 ”，Firefox忽略它也不是错误的。 因此，您应该考虑一个解决方案，其中将父<td> -element设置为style="position:relative;" 不是您的“漂流”框的参考。

也许这里的答案可以帮助您：

“ Firefox是否支持位置：表元素上的相对位置？ ”

Answer 2

问题是Firefox支持在表格单元上进行相对定位。 请参阅： Firefox支持表元素上的相对位置吗？

您的解决方法 ：
将position:relative对于包含的<table>标记应用，以使表是定位上下文，而不是单元格。

这应该在您的情况下起作用，因为您只有一行单元格，并且它们的bottom与表格相同。 我能够在Firebug的您的网站上使用它； 尽管不在您的摆弄中，因为在该示例中，单元格未与桌面底部对齐。