1

私の Web サイトには、高さに達するとブラウザー ウィンドウの下部に固定されるサイドバーがあります。これは複雑に聞こえると思いますが、おそらくそうではありません。

jsfiddle で少しデモを行いました: http://jsfiddle.net/dJXS2/1/

$(window).scroll(function() {

    var bh = $(window).height();
    var st = $(window).scrollTop();
    var eh = $('#element').height();
    var eo = $('#element').offset();

    if ( st >= (eo.top + eh) - bh ) {
        //$('#element').css('position', 'fixed');
    }


});
​

繰り返しますが、私が望むこと:page-heightテスト目的で本体を長くする div が表示されます。緑のサイドバーは、ページの高さよりも短くなっています。ユーザーが緑色のバーの下部を超えてスクロールすると、緑色のバーが現在の位置に固定されるようにします。したがって、緑色のバーの下にある空白をユーザーに見せたくありません。もう一度上にスクロールするときは、もちろん通常のスクロール動作に戻したいので、緑色のバーはもう修正しないでください。

それに関するアイデアはありますか？

4

1 に答える 1

3

position: fixed を使用できます

http://jsfiddle.net/dJXS2/5/

$(window).scroll(function() {

    var bh = $(window).height();
    var st = $(window).scrollTop();
    var el = $('#element');
    var eh = el.height();
    if ( st >= (100 + eh) - bh ) {
        //fix the positon and leave the green bar in the viewport
        el.css({
            position: 'fixed',
            left: el.offset().left,
            bottom: 0
        });
    }
    else {
        // return element to normal flow
        el.removeAttr("style");
    }

});
于 2012-05-04T14:58:04.657 に答える