【CSS】スマホでヘッダー部分を固定させるには！？

最近は、スマホサイトやらレスポンシブやらばっかですね（笑）。とまぁそんなこんなで最近はスマホでもヘッダー部分が固定されているサイトを見かけたりします。

個人的には思ったりするんですが、検索でひっかかるとランディングページって長いページってこともあり、そーすると下までスクロールした後に別のページに移動したいときとか、わざわざ上までスクロールするのが以外に面倒だったりします。（笑）

なので、まぁヘッダーを固定させればユーザーも遷移しやすいよね～と思ったので、ヘッダーを固定させること自体はCSSで出来るので、一応メモしておこう。ただトップへ戻るボタン配置したり、もちろん手段はいろいろあるんですがそれは置いておきます。

メニューを固定させるソースコード

そんな難しいことでもないので、簡単にhtmlとCSSのソースコードを張っておきます。

	
		ここは固定させたい要素です。
	
	
		ここは、コンテンツ要素です。

下記のように固定させたい要素をpositionでfixedで固定することができます。

	div#header {
    position: fixed;
    top: 0;
    left:0;
	height:50px;
	}

fixedを指定することでtopとleftプロパティで位置を決められるので0を指定して左上に固定します。

しかし上記のよう設定すると、その下に設定してあるコンテンツが下に隠れて重なってる状態になってしまうので、固定したヘッダー分の高さを確保してやる必要があります。

	div#contents {
		margin-top:50px;
	}

こうしておけばコンテンツが隠れないで済みます。

対応ブラウザはiphoneの場合はiOS4以前とAndroid2.3.x以前のブラウザには対応していないみたいですね。