2

ここでは、このように動作するはずの右側のサイドバーに div があります。

1) ページを下にスクロールして div がブラウザー画面の上部に到達すると、クラスが変更され、div の親要素の下部に到達するまで画面の上部に固定されます。

2) div の下部が親要素の下部に達すると、そのクラスは非固定位置に戻ります。

http://jsfiddle.net/comparebest/z2Nyn/1/で遊ぶための jsfiddle は次のとおりです。

今問題に：

何らかの理由で、FireFox では div が親要素の下部に達すると div が消えますが、Chrome、IE、および Safari では表示されたままになります。

この動作を確認するには、ブラウザ画面のサイズを小さくする必要がある場合があります。

FFでdivが消えないようにするにはどうすればよいですか?

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

2 に答える 2

4

あなたが直面している問題は、実際には非常に単純ですが、ちょっと面倒です。CSS 2.1の仕様から、次のように述べられています。

table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell、および table-caption 要素に対する「position:relative」の効果未定義です。

w3.orgから: " 9.3.1 ポジショニング スキームの選択: 'position' プロパティ"

したがって、他のすべてのブラウザがこの値を「期待どおり」に使用していても、Firefox が無視しても問題ありません。<td>したがって、親要素がstyle="position:relative;"「フローター」ボックスの参照ではない解決策を考える必要があります。

多分ここでの答えがあなたを助けることができます：

" Firefox は table 要素の position: relative をサポートしていますか? "

于 2012-10-19T23:37:37.260 に答える
2

問題は、Firefox がテーブル セルの相対位置をサポートしていることです。参照: Firefox はテーブル要素の位置: 相対をサポートしていますか?

あなたの修正:含まれているタグに
適用して、セルではなくテーブルが配置コンテキストになるようにします。position:relative<table>

bottomセルの行が1つしかなく、テーブルと同じであるため、これはあなたの状況で機能するはずです。Firebug のサイトでこれを機能させることができました。あなたのフィドルではありませんが、その例では、セルがテーブルの下部に揃えられていないためです。

于 2012-10-19T23:35:44.433 に答える