1

基本的に、4 つの div (バナー、左のコンテンツ、右のコンテンツ、およびフッター) があります。バナーと左のコンテンツ div は固定されていますが、右のコンテンツとフッターは固定されていません。フッターの上部が左側のコンテンツ div の下部に出くわしたときに、それ自体が修正されず、右側の div と一緒にスクロールされるようにしたいと考えています。

以下のjsfiddleに現在あるもののプレビューをセットアップします。

http://jsfiddle.net/sgcer/270/

<div id="banner">BANNER</div>
<div id="content">
    <div id="left">LEFT</div>
    <div id="right">RIGHT</div>
</div>
<div id="footer">FOOTER</div>

#banner {
    float: left;
    width: 100%;
    height: 100px;
    background-color: #00ff00;
    position: fixed;
}
#content {
    height: auto;
}
#left {
    float: left;
    width: 30%;
    height: 600px;
    background-color: #ccc;
    position: fixed;
    margin-top: 100px;
}
#right {
    float: right;
    width: 70%;
    height: 750px;
    background-color: #333;
    margin-top: 100px;
}
#footer {
    clear: both;
    width: 100%;
    height: 100px;
    background-color: #ff0000;
}

どんな助けでも大歓迎です！

4

3 に答える 3

2

これを行うための一般的な手順は次のとおりです。

  1. Javascriptを使用して、divおよびフッターのピクセル位置を取得します
  2. リスナーを使用してonscroll、フッターが「修正解除」するタイミングをリッスンします
  3. その場合は、フッターclassNameにクラスを追加するために使用します"fixed"

CSSに、次を追加する必要があります。

.fixed { position: fixed; }

jQueryを使用すると、これらすべても簡単になります。

お役に立てば幸いです。

于 2013-03-05T04:19:41.067 に答える
1

これを試して：

$(window).scroll(function () {
        var ftop = $("#footer").position().top;
        var lbottom = $("#footer").position().top + $("#left").height();

        var scrollTop = $(window).scrollTop();
        var diff = ftop - scrollTop;

        if( diff <= lbottom)
        $("#left").css("position","static");
        else
        $("#left").css("position","fixed");
    });
于 2013-03-05T05:27:15.807 に答える
1

私はフィドルをフォークしました：http://jsfiddle.net/YK72r/2/

私が行ったことは、ifすべてのスクロールイベントで呼び出され、必要な高さを見つけるために少しのメトリック計算を使用し、jQuery のcssメソッドを使用して左側のサイドバーの css を変更しelse、スクロールアップ時に元に戻すステートメントを追加しました。

var scrollHeight;

$(window).ready(function() {
    scrollHeight = $('#footer').offset().top - $('#left').height() - $('#left').offset().top;
});

$(window).scroll(function() {
    if ($(document).scrollTop() >= scrollHeight) {
        $('#left').css({
            'position': 'relative',
            'margin-top': '350px'
        });
    } else {
        $('#left').css({
            'position': 'fixed',
            'margin-top': '100px'
        });
    }
});

高さを少し変更したことに注意してください。css ピクセル値に注意してください。

于 2013-03-05T04:43:10.447 に答える