2010-11-25 6 views
0

ユーザーがページを上下にスクロールしたときに画像/コントロールを常に表示する方法を知っている人がいるかどうかは疑問でした。コントロールを常に表示し続ける

Google検索の新しいページには、入力時に結果を自動的に判断する例が表示されています。右側には、ページの上部から概ね100pxで始まる地図があります。下にスクロールすると、マップは表示されたままになりますが、ページの一番上から0pxです。バックアップをスクロールすると、ページ上部から100pxの通常の位置に戻ります。

これはどのように行われますか?

答えて

3

あなたはIE6を除くすべてのブラウザでposition: fixed

<div style="position: fixed; right: 100px; top: 100px; width: 200px; height: 100px; background-color: red"> 
I'm fixed</div> 

作品を探しています。

+0

「ページの上部から100px程度で始まる」と似たようなものが必要な場合は、小さなjsが必要な場合もあります。マップを下にスクロールすると0pxになります。 – sjobe

0

position:fixedここに行く方法です。上記のような効果をGoogleページのようにしたい場合は、スクロール位置に応じて要素のCSSスタイルを切り替える少しのjavascriptが必要になります。 jqueryのに依存 http://jsfiddle.net/6bnuU/

注:

現在地そのタスクのためのスクリプトを見つけることができます。 jqueryを必要としないソリューションを探している場合は、スクリプトを簡単に書き換えることができますが、IEは他のブラウザとは異なるスクロール状態のAPIを使用するため、ブラウザスイッチを使用する必要があります。その後、値fixed

+0

Simonさん、感謝します。それを行う? – user439525

+0

私はちょうど私の答えを広げて、それがあなたの問題を解決することを願って – Simon

+0

@サイモンを見逃しているはずですが、あなたのjsfiddleは何もしていません、固定されたdivは内容でいっぱいです – iamserious

0

使用CSS position、位置(簡単な作業である)あなたがそれをサポートしたい場合はJavaScriptでそれをエミュレートする必要がありますので、固定、: はまた、IE 6は、位置をサポートしていないことに注意してくださいそれはleft,right,topおよび/またはbottomのページにあります。例:

#some_element { 
    position: fixed; 
    top: 100px; 
    right: 0; 
} 

正確な例として、JavaScriptが必要です。

関連する問題