Lesson 07 スクロール時に透ける上部固定型ナビゲーション - Webデザイン表現&技法の新・ナビゲーション編

Webデザイン 表現&技法の 新・スタンダード

Lesson07

スクロール時に透ける 上部固定型ナビゲーション

制作・文

宮﨑優子（ビーズスタジオ）

jQuery と CSS を使った位置固定型のナビゲーション「Fixed Fade Out Menu」。ページをスクロールしても固定化されており、操作していないときは半透明化するためほかのコンテンツの邪魔にならない。

まず、「Fixed Fade Out Menu」の配布サイトからスクリプトを取得しよう。方法は、demoページ（http://tympanus.net/codrops/2009/12/11/fixed-fade-out-menu-a-css-and-jquery-tutorial/）から、該当する部分「3. The JavaScript」のソースコードをコピーして外部ファイル化すればよい【1-1】【1-2】。


【1-1】「Fixed Fade Out Menu」の配布サイトページをスクロールさせると出てくる「3.The　JavaScript（赤線枠）」のソースコードをコピーしてくる


【1-2】外部ファイル化する時は太字の箇所の内側に【1-1】でコピーしてきたコードを貼りつける

次に必要なXHTMLのマークアップを行う。固定表示させるヘッダー部分はdivで囲み、divには一意のクラス名またはidを指定する【2-1】。

固定表示の方法はCSSで固定表示をさせたい箇所に「position:fixed」を指定するのだが、IE6は「position:fixed」が効かないので、「github」から「jquery.exfixed」というjQueryプラグインを入手する【2-2】。

固定表示をさせたい箇所にはCSS でposition:fixed、left:0px、right:0px、top:0px、z-indexを指定する。サンプルではヘッダー部分を固定表示し、常に画面の上部、中央に表示させるためleft、rightともに0pxを指定している。z-indexに指定する値はCSSソース内で一番大きい数値を指定する【2-3】。


【2-1】今回は太字になっている「header」を固定する


【2-2】「github」の「jquery.ex-fixed」ダウンロードサイト（https://github.com/cyokodog/jquery.ex-fixed）


【2-3】

CSSのコーディングが終わったら、head内にJavaScriptを実装する。

スクロール時に滑らかな動きにするための「yuga.js」（http://www.kyosuke.jp/yugajs/）、【1-2】で外部化したjs、「jquery.ex-fixed.js」をそれぞれ読み込む。「jquery.ex-fixed.js」は【2-2】でダウンロードしたzipファイルの中に旧バージョンも梱包されているので、一番新しいバージョンを使う。【2-1】で指定したid（もしくはクラス名）をトリガーにして「jquery.ex-fixed.js」が作動するようにコードを実装する。この際、「jquery.exfixed.js」はIE6以外では必要がないのでHTMLで分岐を行う【3-1】。


【3-1】superfish.cssを実装した後。JavaScriptを実装しなくてもCSSでここまで動きをコントロールできる

外部ファイル化したjs の中で「#nav」となっている箇所を【2-1】で指定したid（もしくはクラス名）に変更する【4-1】。①～④で指定している内容は次のとおり。

① 固定表示部分がページの一番上にいない時の不透過度とフェードアウトする時の秒数。

② 固定表示部分がページの一番上に戻った時の不透過度とフェードインする時の秒数。

③ 固定表示部分にカーソルが乗った時の不透過度とフェードインする時の秒数。

④ 固定表示部分からカーソルが離れた時の不透過度とフェードアウトする時の秒数。

不透過度はanimate内のopacityに対して1 ～0.1の値を指定する。数値が小さくなるほど不透過度は低くなる。

フェードイン／フェードアウトのスピードはanimate内のopacityの隣に数値で設定する（1秒=1000）。


【4-1】


【4-2】【4-2】→ 【4-3】の順にページが移動していく


【4-3】


【4-4】headerにカーソルを合わせると、ページ移動中でもナビゲーションがはっきりと表示される