Webデザイン |
Lesson07 | スクロール時に透ける 上部固定型ナビゲーション |
制作・文 | 宮﨑優子(ビーズスタジオ) |
jQuery と CSS を使った位置固定型のナビゲーション「Fixed Fade Out Menu」。ページをスクロールしても固定化されており、操作していないときは半透明化するためほかのコンテンツの邪魔にならない。 |
01
【1-1】「Fixed Fade Out Menu」の配布サイトページをスクロールさせると出てくる「3.The JavaScript(赤線枠)」のソースコードをコピーしてくる
【1-2】外部ファイル化する時は太字の箇所の内側に【1-1】でコピーしてきたコードを貼りつける
02
固定表示の方法は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】
03
スクロール時に滑らかな動きにするための「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でここまで動きをコントロールできる
04
① 固定表示部分がページの一番上にいない時の不透過度とフェードアウトする時の秒数。
② 固定表示部分がページの一番上に戻った時の不透過度とフェードインする時の秒数。
③ 固定表示部分にカーソルが乗った時の不透過度とフェードインする時の秒数。
④ 固定表示部分からカーソルが離れた時の不透過度とフェードアウトする時の秒数。
不透過度はanimate内のopacityに対して1 ~0.1の値を指定する。数値が小さくなるほど不透過度は低くなる。
フェードイン/フェードアウトのスピードはanimate内のopacityの隣に数値で設定する(1秒=1000)。
【4-1】
【4-2】【4-2】→ 【4-3】の順にページが移動していく
【4-3】
【4-4】headerにカーソルを合わせると、ページ移動中でもナビゲーションがはっきりと表示される