Divを特定のスクロール位置に固定する方法を教えてください。

Yahoo.comのように、ページを下にスクロールすると、その検索ボックスが特定のスクロール位置のウィンドウの上部にくっついてしまいますか？どのようにそれを行うには、CSSを使用して可能ですか？Divを特定のスクロール位置に固定する方法を教えてください。

2012-03-02 sandbox

修正されるdivのコンテナdivが必要です。あなたが一番上に常に表示したいdivが、この内側になります。このようにDIV：

<div id="fixedDivWrapper"> 
    </div id="scroll"> 
    This stays still! 
    </div>

とあなたのCSS：あなたは

position: fixed; 
top: 10px; 
left: 20px;

を定義する必要があります

position: fixed; /*This fixes it to the top of the div.*/ 
top: 20px; /*Margin at the top of the fixed div*/

2012-03-02 10:00:56 Undefined

しかし、ページが下にスクロールされている場合にのみ固定（またはスティック）する必要があります。例：このサイトの 'http：// chrispederick.com/work/web-developer /'はページを下にスクロールして表示します右のdiv。 – sandbox

ああ、私は彼らがそれをやった方法に答えなかった。私は私の答えを変更します – Undefined

これがハングします上から10px、左から20pxをdivにして、ページのスクロール中に貼り付けます。

また、他にもいくつかのプロパティを追加する必要があります。およびその他のパラメータ。

2012-03-02 10:07:28 Jibla

私はそのDIVは、特定のスクロール位置に達した後にのみ固定する必要があります。 facebookの 'right sidebar'と同じように、 – sandbox

にはjavascriptが必要です。 CSSだけではできません。 – Jibla

このテクニックについて知りたい場合は、私にサイトを紹介してもらえますか？ – sandbox

position: fixed;

しかしIE6またはiOSのSafari < 5.

2012-03-02 10:12:43

きちんとCSS/JavaScriptをsolutionでこのdosnt作業に注意してください。

2012-03-25 21:11:56

ここでは、まさにあなたが望むものを行う非常に基本的なデモです。 jQueryを使用してタスクを単純化することはできますが、これは簡単ですが、必要に応じて純粋なJSにすることができます。これは何

は簡単です。

後で必要となるいくつかの変数を保存します。&は、最初に先頭へのオフセットのような変数を決して変更しません。
上からの現在の位置が、ウィンドウでスクロールする要素のオフセットよりも多少小さいかどうかを確認するイベントが発生した場合に、ウィンドウのスクロールイベントにイベントをバインドします。
もしスクロールトップがより多く、その瞬間にクラスを持っていなければ、CSSは残りの部分を行い、もう一つの方法はトップからの位置がエレメントの元のオフセットよりも小さくなるとarroundになります。我々はCSSとの両方のタスクを実行しますが、各状態は、我々は単に、むしろそれをすべて行うためにJSに頼るよりも、クラスを切り替えスクリプトを記述アクティブなときのどちらかを選択する必要があることができれば

シンプルさが、ここではすべての魔法です。

2012-03-25 23:15:13 sg3s

答えて