0

私は次のフィドルを持っています：http：//jsfiddle.net/yFjtt/1/

アイデアは、ユーザーがヘッダーを過去にスクロールして、ページをさらに下にスクロールしている間、サイドバーを所定の位置に「固定」できるようにすることです。

ページの下部に近づくと、残りのスペースとサイドバーに必要なスペースを計算し、固定位置を維持しながらサイドバーを上に移動するための負のマージンを追加する必要があります。

ここまではすべて正常に機能します。

次の問題は、サイドバーが必要な範囲だけ上に移動し、下から約10ピクセルの位置に留まるようにすることです。このようにして、サイドバーは、コンテンツを表示するために上に移動する必要があるまで固定されます。その後、すべてが表示されると、下から約10ピクセルで再びスタックします。

これが私がこれを達成しようとしたところです（完全なコードについてはフィドルを参照してください）：

if( $(window).scrollTop() > (documentHeight - sidebarHeight) ) {

        if( offsetBottom < 10) {

        }
        else {
            $('div.sidebar').stop(true,false);
            $('div.sidebar').animate({'margin-top':offset}, 300);
        }

    } else {
        $('div.sidebar').stop(true,true);
        $('div.sidebar').css({'margin-top':'0'});
    }

ただし、サイドバーはまだページの上方に移動しすぎています...誰か助けてもらえますか？下からのオフセットを計算するのは単純な間違いだと確信しています。

4

1 に答える 1

2

それらのアニメーションがそこで何をしているのかわからないことを除いて、あなたは良い試みをしたと思います。基本的に、3つのチェックが必要です。最初に、使用がヘッダーより上にあるかどうかを確認し、次に、ヘッダーとサイドバーの下限の間にあるかどうかを確認し、最後に、そのポイントより下にあるかどうかを確認します。次に、クラスを交換して変更し、必要に応じて最上位の値を変更します。

jsFiddle

var sidebarHeight = $('div.sidebar').height();
var documentHeight = $(document).height();
var headerHeight = $('div.header').height();

$(window).scroll(function() {
    var margin = 10;

    var sidebar_offset = documentHeight - sidebarHeight - (margin * 2); // double margin to account for top and bottom margins

    if ($(window).scrollTop() > headerHeight && $(window).scrollTop() < sidebar_offset ) {
        // below header, but above the sidebar offset limit
        $('div.sidebar').addClass('fixed');  
        $('div.sidebar').css('top', '');    
    }
    else if ( $(window).scrollTop() <= headerHeight ) {
        // above header
        $('div.sidebar').removeClass('fixed');
        $('div.sidebar').css('top', ''); 
    }
    else {
        // past the sidebar offset limit
        $('div.sidebar').removeClass('fixed');
        $('div.sidebar').css('top', documentHeight - sidebarHeight - margin);
    }
});​
于 2012-11-21T18:01:47.450 に答える