第7回　特定のタイミングでヘッダーナビゲーション部分を上部に固定する

ブラウザをスクロールした際に、表示領域の上部にヘッダーやナビゲーションなどの特定の要素を常に固定位置に表示させることはCSSでも可能です。ただ、ページレイアウトの都合で、最上部にPR画像のようなものを固定表示させたくない場合や、逆に、その下にヘッダーのような固定表示をさせたい場合があります。そんなときは、CSSではなくJavascriptでブラウザのスクロール位置や要素の高さなどを取得して、任意のタイミングで特定の要素を固定表示させると、うまく表現することができます。

解説：（有）ムーニーワークス　ハヤシユタカ

前回は、リンク部分やフォームなどにマウスカーソルをあてると説明や入力サポートなどを表示させるツールチップを作成しましたが、今回はページの上部を特定の位置までスクロールさせた際にヘッダー部分を固定するサンプルを作成します。ファーストビューをPRスペースとしてより目立たせたいときに有効です。

■今回作成したサンプル

【サンプル】：「特定の位置でヘッダーエリアを固定させる」

●ヘッダー部分のHTMLとCSS

今回のサンプルはページの最上部をPRスペースとしてメインビジュアル画像を配置し、その下にページ上部に固定配置させたいサイトロゴやグローバルナビゲーションを内包するヘッダーを配置します。要素をCSSの「position: fixed」によって固定配置してしまうと、ページをスクロールさせてもずっと最初の位置に固定表示され続けてしまうため、「position: fixed」による固定配置は行わないのがポイントです。

■■■■　HTMLコード

<div id="headerTopicContainer">
<div class="inner">
<img src="img/01.jpg" alt="">
</div>
</div>
<header id="headerContainer">
<div class="inner">
<h1 id="siteID">jQuery <span class="small">DESIGN METHOD</span></h1>
<nav id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>

■■■■　CSSコード

#headerContainer {
  position: absolute;
  z-index: 100;
  width: 100%;
  background: rgba( 0, 0, 0, 0.8);
・・・省略・・・
#headerTopicContainer {
  position: relative;
  background: #000;
}
#headerTopicContainer img {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
}

●特定のスクロール位置でヘッダーを固定する

グラフィックイメージの下のナビゲーションがブラウザの上部に来たときに固定させるには、スクロールさせる位置が設定した高さ（この場合ブラウザ内の高さ）に来た場合に、positionを使用して固定させます。こうすることで常にブラウザ上に表示させることができます。ヘッダーナビゲーションや特定のバナーなどを表示させるのに有効ですね。

ヘッダーエリアがブラウザ上部に来た際にヘッダーを固定させる

スクロールされるたびに、スクロール量とスライダーエリアの位置を比較します。スクロール量がスライダーエリアの高さを越えた場合は、ヘッダーにposition:fixedを与え、越えない場合はヘッダーにposition:staticを設定します。

■■■■　JSコード

#case_slider .controls {
var $window = $(window),
$container = $('#headerTopicContainer'),
$header = $('#headerContainer'),
$headerAfter = $header.next(),
headerY = $header.height(),
containerY = $container.height();
function initialize(){
	  $window.on('scroll', scroll);
  };
  // ヘッダーを固定する関数
  function scroll(){
	  // スクロール量がcontainerYを上回ったら、関数_fixedを実行
	  // スクロール量がcontainerYを上回ったら、関数_staticを実行
	  (containerY <= $window.scrollTop())?
		  _fixed() :
		  _static();
	  function _fixed(){
		  $header.css({
			  'position': 'fixed',
			  'top': 0,
			  'left': 0
		  });
		  $headerAfter.css('marginTop', headerY);
	  };
	  function _static(){
		  $header.css({
			  'position': 'static',
			  'top': '',
			  'left': ''
		  });
		  $headerAfter.css('marginTop', '');
	  };
  };

●ヘッダー背景を半透明にして重なりに立体感を持たせる

ヘッダーナビゲーションのエリアにボックスシャドウを使ってドロップシャドウ効果と背景色をrbgaに変更することによって、背景力に透明度の設定をすることができます。ヘッダーが固定され、さらにページスクロールされた際に後ろのコンテンツが半透明とドロップシャドウで見えることで、さりげない立体感を演出することができます。

ヘッダーエリアの背景を半透明にして立体感のある見栄えに

■■■■　CSSコード

#headerContainer {
  position: absolute;
  z-index: 100;
  width: 100%;
  background: rgba( 0, 0, 0, 0.8);
  box-shadow:0px 3px 5px #999;
  behavior: url(PIE.htc);
}

●コードは修正のしやすくする一例

最近のWebサイトの傾向のひとつとして、ブラウザ表示領域全体を使って大きいサイズの画像を表示してアピール度やインパクトを高めるサイトが増えてきています。また、ユーザーに提供する文章などの文字情報については、表示領域全体に文字を流し込んでしまうと、非常に読みづらくなってしまうため、要素ごとにmarginやwidthプロパティを設定するか、または一定幅以上大きくならない領域を作成してその領域内に要素を配置することが多いです。

このとき、要素ごとにmarginやwidthプロパティを設定してしまうと、後の修正が大変でメンテナンス性が良くないため、内側のサイズなどを設定したclassセレクタを1つ作成し、各要素ごとにこれを設定していけば良いでしょう。今回のサンプルでは、classセレクタ「inner」を作成し、これを内側の領域として設定しました。このセレクタのCSSを1つ変更するだけで、該当するすべての要素を反映できるので大変便利です。

■■■■　HTMLコード

<header id="headerContainer">
<div class="inner">
・・・省略・・・
</div>
</header>

■■■■　CSSコード

/*コンテンツエリアの設定*/
.inner {
  position: relative;
  max-width: 1080px;
  min-width: 720px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

今回は以上になります。

次回はブログやサイトなどで設置されるSNSボタンをまとめて簡単に設置できるサンプルを作成してみます。

『現場でかならず使われている jQueryデザインのメソッド』

今回紹介したサンプルは『現場でかならず使われている jQueryデザインのメソッド』にてサンプルダウンロードとコードの解説を行っております。

作成したサンプルや本の紹介はこちらをご覧ください。

2014/11/19

●本連載で使用している書籍「現場でかならず使われている jQueryデザインのメソッド」

jQueryの特長は、通常のJavaScriptよりもシンプルなコードでWebサイトの動的なふるまいを記述できる点です。CSSと同じセレクタが利用できるので、HTML+CSSをひと通り理解していれば、文法や記述ルールはすぐに習得できます。書は、このようなjQueryの実践感覚を身につくように、アコーディオンやタブパネル、ツールチップといった頻出の基礎技術から、背景全面動画、パララックススクロールなどの現在流行している最新の手法まで、多彩なjQueryのテクニックを解説。現場の制作メソッドがぎっしり詰まった必携の一冊です！

Profile
【ハヤシユタカ】2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より教鞭をとる。2004年からは、デジタルハリウッド大学大学院、明治大学大学院非常勤講師を歴任。2012年からはデジハリオンラインスクールにてWEB関連講座のeラーニング教材の開発に携わり、会社・自宅のPCからいつでも「HTML5」「WordPress」を学べる講座を担当。2013年御苗場Vol12.横浜にて「The Zoological Garden ～言葉のない対話～」エプソン賞受賞。

こちらの連載もあわせてご覧ください
●WordPressでブログでなくビジネスサイトをつくろう：http://www.mdn.co.jp/di/articles/2782/
●ゼロからはじめるHTML5でのサイト制作：http://www.mdn.co.jp/di/articles/2605/
●HTML5でサイトをつくろう：http://www.html5-memo.com/
●Webデザインクリップ：http://webdesignmatome.com/

【著書・共著】
●現場でかならず使われている jQueryデザインのメソッド (2014/4/25)
●HTML5デザイン仕事のネタ帳 CSS3+JavaScript+CSSフレームワークと活用するプロのテクニック (2014/3/24)
●現場で役立つCSS3デザインパーツライブラリ (2013/5/17)
●WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作 (2012/9/20)
●WebデザイナーのためのHTML5入門 (2012/08)
●ポケット詳解 jQuery Mobile辞典 (2012/05)
●すべての人に知っておいてほしい HTML5 & CSS3 の基本原則(2012/10/20)
●すべての人に知っておいてほしいスタイルシートデザインの基本原則(2012/5/25)