【31:ナビゲーションヘッダーの固定】上部に固定ナビゲーション
プロジェクト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を固定ナビゲーション分確保する。
特定のブラウザで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; }); });
参考サイト
jQueryでスクロールするとヘッダーを固定させる – FEVDES BLOG
Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと | 株式会社LIG
jQueryで簡単にヘッダー上部固定でページ内リンクがずれるのを防ぐ! | デザインマガジン