画面のスクロールに続くコンテナ

Question

自分のページの1つに「後方互換性のある」スクロールサイドバーを設定したいと思います。

私は、非常に長くなる可能性のある魚種に関する情報とそれに付随する画像を含むページを持っています。

画像は右側のペインに表示されており、ページの下部までスクロールする際にユーザーにフォローしてもらいたいと思います。

jQuery().ready(function($) { 
    var $scrollingDiv = $("#sidebar"); 

    $(window).scroll(function(){    
     $scrollingDiv 
      .stop() 
      .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow");   
    }); 
}); 

をしかし、スクロールダウンするとき、それはあまりにも遠くにジャンプ：

私はある程度の成功を収めて、次のコードを使用しました。

（元の位置）

（シングルマウスホイールのクリックをスクロール）

ページを下にスクロール起動すると、サイドバーが半分の周りに表示されます - そのように、あなたは2つの画像しか見ることができません。

ユーザーが過去のXポイント（たとえば400ピクセル）をスクロールすると、サイドバーがページで移動を開始します。ただし、ユーザーがページの上部にもう一度アクセスすると、元の位置に戻る必要があります。

このコードに適用できる修正プログラムがありますか、それとももっと良い方法ですか？

---------------------------------------------------------------------------------

EDIT：position:fixed問題

私はジョシュとデビッドの提案（JSコードのいずれかのビット）ごとにposition:fixedを適用しようとすると、この問題が発生した：

を

この要素に添付されたCSSスタイルのFirebugによる読み込みは次のとおりです。

Answer 1

このためにプラグインを使用することはできますが、それはあなた自身でも同様に簡単な作業です。

この単純なマークアップ考えてみましょう：

<div id="content">Content</div> 
<div id="sidebar"><div>Sidebar</div></div> 

をそして、これはあなたが必要とするすべてのjavascriptのようになります。今

var el = $('#sidebar'), 
    pos = el.position().top; 

$(window).scroll(function() { 
    el.toggleClass('fixed', $(this).scrollTop() >= pos); 
}); 

が、それはユーザー次第、#sidebar divのにクラスを追加しますサイドバーよりもスクロールしているので、今必要なのはCSSです。私は、レイアウトの問題を避けるために、子要素に固定位置を適用しています：http://jsfiddle.net/QZyH3/

Answer 2

あなたは、Appleのショッピングカートのサイドバーを複製this tutorialで見つかったjQueryのコードを、試してみてください。これは、実用的なデモと非常に小さなコードフットプリントを持っています。

Answer 3

なぜCSSを使用しないのですかposition: fixed;？もちろん、divがスムーズではなく、スクロールトップにまっすぐに従ってもかまいません。私はそれがIE6だけでは動作しないことを発見しました。今日は固定位置を使用することが良い解決策だと思います。そうでなければ、window.scrollTopでDOMを取得し、要素の絶対位置に割り当てます。