固定ヘッダーfixedを美しく表示

hoge

固定ヘッダーにする場合って、cssで最初からfixedで固めちゃう場合が多いと思うのだけど、
そうすると、ページ内リンク用にmargin（マイナス）＋paddingを設定している場合に
初期表示で一瞬メインコンテンツが固定ヘッダーの後ろに隠れたりすることがあると思うの！（ていうかあった。）

ので、その対策。

 

 

固定ヘッダーを最初はrelativeにしておいて、メインコンテンツを表示し終わってからjqueryにてfixedに変更する。

 

CSS

header{
/*
	position:fixed; // ★cssで最初からfixedしちゃうと、初期表示時にmainコンテンツが一瞬隠れているので、やめる。
*/
	position:relative; // ★そういっったわけで、とりあえずrelative。jqueryにてfixedを設定。
	top:0;
	left:0;
	width:100%;
	z-index:1000!important;
}

　

 

jquery

画面表示が終わってから読み込むのが理想なので、footerあたりに仕込んでおけばOK

	<script>
		$(window).load(function(){
//test		(function($) {
			var h = $("header").outerHeight(); // ★ヘッダー領域の高さを測っておく
			$("header").css("position","fixed"); // ★ヘッダーをfixedで固定する
			$("#main").css("position","relative"); // ★コンテンツ領域を、ヘッダー
			$("#main").css("top",h); // ★
			$("footer").css("position","relative");
			$("footer").css("top",h);
		});
//test		}) (jQuery);
	</script>

ばっちりOK

 

補足

なんで「(function($) {」じゃなく、読み込みの遅い「$(window).load(function(){」を使ってるかというと、
大きめの画像を使用している場合、画像を読み込んで正しい高さを取得する前に、
「outerHeight」が走って、実際より低い高さを取得しちゃうケースが発生したのです。

なので、画像を全部読み込んでから、ヘッダーの高さを取得するというわけ。