Question

Here我在右侧边栏中有一个div应该以这种方式行事：

1）当你向下滚动页面并且div到达浏览器屏幕的顶部时，它的类会发生变化，它会固定在屏幕顶部，直到你到达div的父元素的底部。

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

以下是您与http://jsfiddle.net/comparebest/z2Nyn/1/

一起玩的jsfiddle

现在问题：

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

您可能需要缩小浏览器屏幕的大小以观察此行为。

如何防止div在FF中消失？

P.S：

继承人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 Choosing a positioning scheme: 'position' property”

因此，即使所有其他浏览器都将此值用作“ expected ”，Firefox也不会忽略它。因此，您应该考虑一个解决方案，其中父<td> - 元素style="position:relative;"不是您的“浮动”框的参考。

也许这里的答案可以帮到你：

“Does Firefox support position: relative on table elements?”

Answer 2

问题是Firefox支持对表格单元格的相对定位。请参阅：Does Firefox support position: relative on table elements?

您的修复：
将position:relative应用于包含<table>标记，以便该表是定位上下文，而不是单元格。

这应该适用于您的情况，因为您只有一行单元格，并且它们与表格具有相同的bottom。我能够在Firebug的网站上使用它;虽然不在你的小提琴中，因为在那个例子中，单元格不与表格底部对齐。

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

2 个答案: