タイトルの通りです。画面をスクロールしてもついてくるメニューを今回作成します。
サンプルコードの実行結果はこちら
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 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 |
<!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> <style> *{margin:0;padding:0;} ul{list-style-type:none;} p{font-family:"メイリオ";} body{padding-top:192px;} header #navMenu{ margin: 0 auto; width: 960px;} /* ページヘッダーに付すclass */ .pHeader{ /* 全体のレイアウトに影響しないように ヘッダーを固定する */ position:absolute; width:100%; min-width:960px; box-shadow: 0 2px 2px rgba(0,0,0,0.3); background-color:#f0f0f0;} 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;} #container{ /* li a内のline-heightのpxと同じ値を 設定している。これがないと、テキストの 一部がメニュー下に隠れてしまう。 */ padding-top:48px; width:960px; background-color:#d8d8d8; margin:0 auto;} </style> </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> <script> $(function(){ $(".pHeader").each(function(){ /* ウィンドウとヘッダーを jQueryオブジェクトとする */ var $window = $(window), $header = $(this); /* ヘッダーのデフォルト位置を取得する 変数offsetTopには、ドキュメントの上端からの距離が pix単位で格納されています。 offset()メソッドは 「jQuery要素のドキュメント上の位置を取得」します。 offset()は2つのプロパティを保持してます。 top :ドキュメント上端からの距離 left:ドキュメント左端からの距離 */ var hOffsetTop = $header.offset().top; /* ウィンドウのスクロールされたとき 実行される処理はここのfunction(){..}に書く */ $window.on("scroll",function(){ /* ウィンドウのスクロール量を調べ ヘッダーの初期位置より下にスクロール しているかを判定する */ if( $window.scrollTop() > hOffsetTop ){ /* 初期位置より下にスクロールしている場合 "sticky"classを付す */ $header.addClass("sticky"); }else{ $header.removeClass("sticky"); } }); /* ウィンドウのスクロールイベントを発生させる */ $(window).trigger("scroll"); }); }); </script> </body> </html> |