1

私が使用しているページ レイアウトを示す次の JSFIDDLEがありますが、私が望むものを達成するのに苦労しています。

メイン コンテンツを一番下までスクロールすると、サイドバーの下部がフッターの上部と重なっているのがわかります。 それは常にどのように見えるべきかです。ただし、サイズ変更またはスクロールすると、そうではないことがわかります。

CSS を数日間いじった後、これは js でのみ実行できると結論付けました。特に、他の人が私の他の質問で持っているように、CSS のみを使用して実行できると主張する場合は、機能するフィドルを提供してください。提案されたすべての回答の問題position:fixedは削除され、サイドバーはメインコンテンツとともにスクロールしますが、これは発生しないはずです。

望ましい効果を達成するのを手伝ってください

4

1 に答える 1

1

アップデート：

これは明らかに CSS だけでは実現できません。ここに jQuery ソリューションがあります。

var vh = $("body").height() - $("footer").height();
var sh = $("#side").height();

$(window).resize(function() {
    vh = $("body").height() - $("footer").height();
    sh = $("#side").height();
});

$(document).scroll(function() {
    var vs = $(document).scrollTop() + sh + $("footer").height();

    if(vs < vh)
        $("#side").css("bottom", "0px");
    else
        $("#side").css("bottom", (vs - vh) + "px");
});

テスト用のjsFiddleを次に示します。

于 2013-02-23T20:26:10.423 に答える