Tips4 スクロールで半透明になるメニューをつくりたい

Tips 4

スクロールで半透明になるメニューをつくりたい

JavaScript

	＞＞		point　スクロール時に半透明になる
	＞＞		point　マウスオーバーで通常表示に戻る

ページ上部の固定のメニューを画面がスクロールしたときにもじゃまにならないように半透明にしてみよう。参考にするサンプルは「Fixed Fade Out Menu: A CSS and jQuery Tutorial | Codrops」（tympanus.net/codrops/2009/12/11/fixed-fade-out-menu-a-css-and-jquery-tutorial/）だ。

まずはjQueryを読み込む【1】。次に半透明にするJavaScript部分を作成しよう。ウインドウがスクロールされたときに動作する関数で透明度を操作する。$(window).scrollでスクロールしたときに動作する。「var scrollTop = $(window).scrollTop();」ではスクロール時の座標を取得して変数に格納する。変数「scrollTop」が0ではないとき、すなわちページのいちばん上ではないときにidがnavの要素の透明度をanimateメソッドで「0.2」まで下げる。else以下で変数「scrollTop」が0のとき透明度を「1」（不透明の状態）まで変化させている。最後の数字400は変化の速度を表している【2】。


【1】jQueryを読み込む


【2】スクロール時の挙動

次にメニュー部分にマウスを乗せたときの挙動を作成しよう。$('#nav').hoverでidがnavの要素にマウスが乗ったときに動作する。この部分では変数「scrollTop」が0ではない場合には透明度を「1」に戻している【3】。HTML部分はidを「nav」とする。これでスクロール時に半透明になるメニューの完成だ【4】。


【3】マウスオーバー時の挙動