1

フィドル: http://jsfiddle.net/DerNalia/88N4d/9/

私が達成しようとしている動作：

  1. 十分なスペースがある場合は、サイドバーをページに固定する必要があります
  2. サイドバーに十分なスペースがない場合は、サイドバーをスクロールする必要があります
  3. 下にスクロールしてサイドバーの一番下に到達すると、スクロールを停止する必要があります
  4. 下にスクロールすると、サイドバーの一番下に到達するまで、サイドバーも下にスクロールする必要があります。
  5. 上にスクロールし、サイドバーの上部に到達すると、スクロールを停止する必要があります
  6. コンテンツのスクロール中の任意の時点で、ユーザーがスクロールの方向を切り替えた場合、サイドバーもページ/コンテンツの残りの部分と同じ方向に移動する必要があります
  7. 上にスクロールすると、サイドバーの上部に到達するまで、サイドバーも上にスクロールする必要があります
  8. コンテンツがサイドバーよりも短い場合でも、サイドバーはスクロールできるはず です これは私が問題を抱えているものです

コンテンツ本体の実際のスクロール距離を使用するのではなく、ユーザーが希望する意図したスクロール距離を検出できるようにするにはどうすればよいですか? 別の解決策があるかもしれませんが、これは今のところ私が考えることができるすべてです。

現在、Mac で Chrome を使用しています。

アップデート：

私が気づいたこと：Macでトラックパッドを使用すると、エッジでストレッチ/バウンススクロールのシェナニガンが発生します..これにより、このjavascriptハードコアが台無しになります。十分な回数バウンスすると、サイドバーを画面から完全にスクロールすることができます。マウス ホイールのスクロールには、この問題はありません。

4

1 に答える 1

0

absolute列を配置してから、スクロールで位置を確認して位置を切り替える方がはるかに良いと思います。

両方の列が固定されていて、コンテンツに規則的な流れがある場合、スクロールがジャンプするため、非常に複雑になります。

より単純なロジックを使用して、次のようなソリューションを作成しました。

var $win = $(window);
var $containers = $(".container").css('position','absolute');

// we need to force a height to the body for fixed positioning
$('body').css('minHeight', Math.max.apply( Math, $containers.map(function() {
    return $(this).height();
})));

$win.bind("resize scroll", function() {
    var scrolled = $win.scrollTop(),
        winheight = $win.height(),
        elheight = 0;
    $containers.each(function() {
        elheight = $(this).height();
        $(this).css('position', function() {
            if ( elheight > (winheight+scrolled) ) {
                $(this).css('top',0);
                return 'absolute';
            }
            $(this).css('top', Math.min(0, winheight-elheight));
            return 'fixed';
        });
    });
});

それはあなたの要件を満たすはずです。列がウィンドウの高さよりも短い場合、または scrollTop で十分な場合は、固定位置が有効になります。

栄光のデモ: http://jsfiddle.net/mb9qC/

于 2012-09-24T13:25:45.770 に答える