2011-12-29 48 views
1

可能性の重複:
CSS: fixed position on x-axis but not y?要素の固定位置、垂直

私は水平に固定された位置のヘッダータグを持つスクロールすることになっているHTMLページを持っています。

垂直スクロールバーが表示される場合(サイズ変更ウィンドウ)、ヘッダーを残りのコンテンツと相対的にスクロールします。

誰でも可能な非javascriptソリューションを考えることができますか?

+0

ユーザーがスクロールするとヘッダーが消えますか? – Wex

+0

@Wex実際には、十分にスクロールすれば。 –

+0

まったく同じ質問が尋ねられ、回答されましたover here

答えて

3

固定位置はかなりlousy support on iOS devicesです。ヘッダーに固定の位置を使用する代わりに、ページ上に静的なままにしておく必要があります。 overflow: autoのコンテナを使用して水平方向にスクロールしたいコンテンツを囲んで、ページ全体ではなくコンテンツをスクロールします。

プレビュー:http://jsfiddle.net/Wexcode/vfZjb/

+0

これは良い考えです。このサイトは主にタブレット画面用に設計されているため、iOS情報は非常に役立ちました。 –

+1

この手法を使用すると、オーバーフローしたコンテンツを含むコンテナ上にカーソルが移動していない限り、ユーザーは水平方向にスクロールできなくなります。これは、ページの上部または下部に到達しないデザインでは問題が発生する可能性があります。この問題を打ち消すために、コンテンツコンテナのブラウザサイズの100%以上の高さを持つようにするテクニックを調べることをお勧めします。 – Wex

+0

あなたはもう一度ストライクします。常にフルスクリーンのラッパーとして使用するビューポートdivを作成し、ページをスクロールしているような錯覚を作り出しますが、高さを小さすぎるサイズに変更しても壊れません。 –