【31：ナビゲーションヘッダーの固定】上部に固定ナビゲーション

f:id:seintoseiya:20150730192545p:plain
プロジェクトNo.31：上部に固定ナビゲーション - DEMO

画面上部のヘッダーを固定してスクロールしても常時、上部にリンクがある様にする方法。
色んなサイトでよく見られる表現ですが、ページ内リンクでずれるなど、色々気を付けねばいけない事がある様です。
今回は上部ヘッダーとナビゲーションメニューを用意してメニューのみを固定するという事を行いました。

ナビゲーションを固定する

まずはスクロールされるheader部分と固定するnav部分に分けて書きます。

HTML

<header>
<h1>固定ナビゲーション DEMO</h1>
</header>
<nav>
    <ul>
        <li><a href="#section1">Menu1</a></li>
        <li><a href="#section2">Menu2</a></li>
        <li><a href="#section3">Menu3</a></li>
    </ul>
</nav>
<!-- コンテンツ部分 -->

CSSでnavの方だけposition: fixedを付けます。

CSS

header {
	width: 100%;
	height: 80px;
	color: #333;
	background: #EEE;
}
nav {
	width: 100%;
	color: #FFF;
	background: #333;
	height: 50px;
	position: fixed;
	top: 80px;
}

ナビゲーションの位置を調整する

このままではnavがtop:80pxの位置で固定されている状態なので、
80px分、下にスクロールした時にfixedにする様にしなければいけません。
その方法がDEMOで解説されていましたが、これだと少し問題が生じます。
コンテンツ部分に内容があると、80pxスクロールした時にnavがfixedに変更になるので、コンテンツ部分が上にずれてしまいます。

ということで以下のものを解決策として考えてみた。

当初の様に最初からnavに対してposition: fixedにしておき、
JavaScriptの方で、上部80pxの間だけスクロールしたら、その分だけtopを変更する。

JavaScript

$(function() {
    $(window).scroll(function() {
            var dy = $(this).scrollTop();
            $('nav').css('top', dy < 80 ? 80-dy : 0);
    });
});

コンテンツ部分のpadding-topを固定ナビゲーション分確保する。

CSS

section{
	height: 800px;
	padding-top: 50px;
}

また、これによりページ内リンクでずれるという固定ヘッダーでよく見られる問題も解消されます。

特定のブラウザでYouTubeの動画を埋め込むと固定ナビゲーションの上にくる

z-indexを付けても無視する様で、
以下のオプションをiframeタグのsrc値の最後に追加してあげれば解決するようです。

<!-- 追加するコード：&wmode=transparent -->
<!-- 例 -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/c1bKUr7DQ_E&wmode=transparent" frameborder="0" allowfullscreen></iframe>

おまけ：スムーズスクロール

以前にもプラグインを使ってスムーズスクロールを実装してみたが、
プラグインなしで意外とカンタンに実装できたのでここで紹介します。

JavaScript

$(function() {
    $('a[href^=#]').click(function(){
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top;
        $("html, body").animate({scrollTop:position}, 550, "swing");
        return false;
    });
});