特定のタイミングでヘッダーナビゲーション部分を上部に固定する【jQuery連載07】

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

今回作成したサンプル

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

http://www.html5-memo.com/sample/jq-books/01

ヘッダー部分のHTMLとCSS

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

<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>

#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を使用して固定させることによって常にブラウザ上に表示させることができます。

ヘッダーナビゲーションや特定のバナーなどを表示させるなどに有効に使うことができます。

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', ''); }; }; [/javascript]

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

スクロールされるたびに、スクロール量とスライダーエリアの位置を比較します。

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

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

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

#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);
}

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

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

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

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

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

今回は以上になります。

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