タイトルの通りです。画面をスクロールさせると、違うデザインのメニューがついてくる機能を今回作成しました。
サンプルコードの実行結果はこちら
今回は「throttle-debounce」プラグインを使用しています。これは、スクロールやマウスをクリックしたときに1秒間に呼ばれるイベントハンドラの回数を制限できるプラグインです。「throttle-debounce」プラグインはこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
*{margin:0;padding:0;} ul{list-style-type:none;} p{font-family:"メイリオ";} body{padding-top:192px;} #navMenu{ margin: 0 auto; width: 960px;} /* ページヘッダーに付すclass */ .pHeader{ width:100%; min-width:960px; box-shadow: 0 2px 2px rgba(0,0,0,0.3); background-color:#f0f0f0; position: absolute;} nav ul li{float:left;} nav ul li a{ line-height:48px; letter-spacing:2px; padding:0 1.5em;} /* ウィンドウのスクロール量が一定値を超えたら 要素に付すクラス */ .pHeader.sticky{ position:fixed; top:0px;} /* もう１つのスティキーヘッダー */ .pHeaderDummy{ background-color:#00b4a0; opacity:0.75; /* ウィンドウに対して固定して配置するためにつかう。*/ position:fixed; /* スティッキーヘッダーの高さ(影の部分込み)を 指定する。48px+(2px*2)=52px box-shadowの部分は上部と下部の２つあるので 2pxを2倍にしてます。 */ top:-52px; z-index:5; width:100%; box-shadow:0 2px 2px rgba(0,0,0,0.4); /* visibleクラスに設定されているtopプロパティ 0;を 適用したとき、0.3秒かけて top:-52px -> 0pxに するための設定はここで行う */ -webkit-transition:top 0.3s; transition:top 0.3s;} /* JavaScriptで、ある程度の下にスクロールしたときに 付すclassです。 */ .pHeaderDummy.visible{top:0;} /* 下へスクロールしたときに、表示された 新たなヘッダーメニューにホバーしたとき、 メニューを半透明ではなく完全に表示させる */ .pHeaderDummy:hover{opacity:1;} #container{ /* li a内のline-heightのpxと同じ値を 設定している。これがないと、テキストの 一部がメニュー下に隠れてしまう。 */ padding-top:48px; width:960px; background-color:#d8d8d8; margin:0 auto;} |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>ついてくるヘッダーメニューを作ってみる、さらいついてくるときは ヘッダーメニューのデザインは変えてみる。</title> <script src="js/jquery-1.11.3.js"></script> <script src="js/ui/jquery-ui.js"></script> <!-- イベントハンドラを呼び出す回数を制限する場合に 使用するプラグインを読み込んでいる--> <script src="js/jquery.ba-throttle-debounce.js"></script> <link rel="stylesheet" href="stickmenu2.css"> <script src="js/stickymenu2.js"></script> </head> <body> <header class="pHeader"> <div id="navMenu"> <nav> <ul> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a></li> <li><a href="#">Menu3</a></li> <li><a href="#">Menu4</a></li> <li><a href="#">Menu5</a></li> </ul> </nav> </div> </header> <div id="container"> <p> どこまでも追尾してくるヘッダーメニューのテスト<br> 下にスクロールをさせてみてください。<br> どこまでもメニューがついてきます。 <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </p> </div> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
/* ＊今回やっている処理 1.ブラウザを開いた初期状態では、ヘッダーメニューは 動かさないで、常に元の位置に置いたままにする。 2.ヘッダーの複製(ダミー)を作成して、初期状態では 画面上部の外側に配置する。 3.ウィンドウのスクロールにより、初期か置いてあった ヘッダメニューが非表示になったときに、 ２のヘッダーダミーを見えるようにする。 */ $(function(){ $(".pHeader").each(function(){ /* ウィンドウとヘッダーを jQueryオブジェクトとする */ var $window = $(window), $header = $(this), /* contents()は対象の子要素をすべてを選択 してくるメソッドです。今回だと 「$header(.pHeader)」の中身を見ています。 clone()は選択してきたメソッドを複製(クローン)を 生成する命令です。 $headerの子要素を丸ごとコピーして、 同じものを生み出しています。 この段階では、HTML上には存在はしてません。 変数$headerDummyにその情報を格納します。 */ $headerDummy = $header.contents().clone(), /* 新たなスティッキーヘッダーをつくるために ひとまずDivを用意します。 */ $headerDummyContainer = $('<div class="pHeaderDummy"></div>'), /* 変数thresholdには以下の２つの合計値が格納される １．$header.offset().top： ヘッダーメニューが上から何px離れているか ２．$header.outerHeight()： ヘッダーメニューの高さ(px) */ threshold = $header.offset().top + $header.outerHeight(); /* append()は引数に指定された要素をjQueryオブジェクトに 挿入する命令です。 $headerDummyContainerの内側に $headerDummyの中身をいれる */ $headerDummyContainer.append( $headerDummy ); /* appendTo()は引数に指定された要素の内側に 対象のjQueryオブジェクトを入れる bodyタグの内側に $headerDummyContainerの中身をいれる */ $headerDummyContainer.appendTo("body"); /* ウィンドウがスクロールされたときに行われる処理は ここに書きます。 $.throttle は「jQuery throtte / denounce」プラグインを 使います。1000/12と指定すると、1秒間に最大12回しか下記の イベントハンドラが実行されなくなります。 これが無いと、ユーザーがスクロールするたびに 何回でもこの「スクロール」したときの処理が呼ばれます。 */ $window.on("scroll", $.throttle(1000/12,function(){ /* ウィンドウを下方向にスクロールさせた量が 初期のヘッダーメニューの位置よりも多い場合 (初期のヘッダーメニューよりも下に スクロールさせたか否か) */ if( $window.scrollTop() > threshold ){ /* 初期のヘッダーメニューよりも下の場合は 新しいヘッダーメニューにclass="visible"を付して ブラウザの上部にcssで設定したtransitionプロパティで 指定した0.3秒かけてヘッダーメニューを表示させる */ $headerDummyContainer .addClass("visible"); }else{ $headerDummyContainer .removeClass("visible"); } })); /* ウィンドウのスクロールイベントを発生させる */ $window.trigger("scroll"); }); }); |