レスポンシブスクロールすることによってサイドカラムに配置しているナビゲーションメニューを画面上部に固定してスクロールに合わせて追従させる動作はよく見かけますがだいたいが画面上部に固定のみ、もしくは画面下部に固定のみ、といったものが多くブラウザウィンドウの高さよりもナビゲーションメニューの高さが大きかった場合にはナビゲーションメニューが見切れてしまうものが多く見られます。そんなスクロール追従型のナビゲーションでメニューエリアが見切れないようにスクロールに合わせて画面に固定されつつメニュー部分だけをスクロールさせる固定型ナビゲーションメニューをjQueryを使って作ってみたのでご紹介してみます。「jQueryで画面から見切れない固定型ナビゲーションメニューを実装する方法」サンプルを別枠で表示なかなか文章で説明するのも難しいのでサンプル動作からご確認ください。サンプル画面左側のナビゲーションメニューはスクロールに合わせて追従します。ブラウザウィンドウサイズの高さをナビゲーションメニューよりも小さくするとそのウィンドウの高さに合わせてメニュー部分のみがスクロールしスクロールがメニュー上部に達したら画面上部に固定されスクロールがメニュー下部に達したら画面下部に固定されます。ウィンドウの高さに合わせてメニュー部分のみをスクロールさせることでナビゲーションメニューが画面から見切れてしまいボタン操作ができなくなる、ということを防ぎます。この固定型ナビゲーションメニューの全体構成についてまずはHTMLから。id="contents"><p>牧場のうしろはゆるい丘になって、その黒い平らな頂上は、北の大熊星の下に、ぼんやりふだんよりも低く連って見えました。</p><p>ジョバンニは、もう露の降りかかった小さな林のこみちを、どんどんのぼって行きました。まっくらな草や、いろいろな形に見えるやぶのしげみの間を、その小さなみちが、一すじ白く星あかりに照らしだされてあったのです。草の中には、ぴかぴか青びかりを出す小さな虫もいて、ある葉は青くすかし出され、ジョバンニは、さっきみんなの持って行った烏瓜のあかりのようだとも思いました。-->追従させるナビゲーションメニューエリアを任意のブロック要素で囲いIDもしくはクラスを付けます。(サンプルではID「#menuList」としています。)併せて必要になる要素としてナビゲーションメニューエリア全体を覆いスクロールで追従させる範囲を決めることになるブロック要素を設置します。(サンプルではID「#wrapper」としています。)今回の追従型ナビゲーションではこの2つのブロック要素が最低限必要になります。サンプルにあるID「#contents」はサンプル画面を形成する要素となりスクリプト動作には直接影響しないものになります。これらの要素に対してCSSは以下のように指定します。both;}「#wrapper」を大枠として中に入るナビゲーション要素「#menuList」を「float:left」で画面左に配置してメインコンテンツ要素「#contents」を「float:right」で画面右に配置しています。ナビゲーションエリアのスクロールした際の位置指定に関してはスクリプト側から指定するのでCSSでは特に指定しません。「#menuList」に指定している「-webkit-transform」「-webkit-backface-visibility」「backface-visibility」といったものに関しては、スクロールした際にナビゲーションががたつかないようにするための記述になります。実際のスクロール動作スクリプトは以下の様になります。function(){fixedNav();});});</script>スクリプト開始部分にある設定値の内容は以下の様になっています。「top」の値をその都度調整することによって動作させています。ナビゲーションエリアの高さとウィンドウの高さを比較してウィンドウの高さが小さい場合は、その高さに合わせてナビゲーションエリアを上下にスクロールさせるようにしています。位置の再調整が可能になる構成にしています。一つ目のサンプルはPCレイアウトのみの指定になっていますが実際はレスポンシブで構成されたWebサイトで使用することの方が多くなると思うのでウィンドウサイズによってスクロール動作の実行を制御したパターンも紹介してみます。「レスポンシブ版:jQueryで画面から見切れない固定型ナビゲーションメニューを実装する方法」サンプルを別枠で表示ブレークポイントを「768px」で設定し、ウィンドウサイズがそれ以上だったらスクロール動作のスクリプトを実行し、ウィンドウサイズがそれ以下だったらスクロール動作のスクリプトを実行させません。このサンプルではHTMLは一つ目のものと同じになるので割愛します。CSSではPCレイアウト時の構成はそのままでブレークポイントを「768px」としてメディアクエリーを使ってスマートフォンレイアウト時の指定のみ加えます。15px;}}スクリプト動作に直接影響するものではないですがメディアクエリーを使って通常のレスポンシブに関わる指定を加えます。レスポンシブに対応したスクリプトは以下の様な構成になります。768」がレスポンシブさせるブレイクポイントの値になるのでCSSのメディアクエリーで指定した値と同じものを入れておきます。スクロールでの追従動作に関しては一つ目のスクリプトと同じになりスクリプト50~54行目でウィンドウサイズ幅がブレイクポイントより大きければスクリプトを実行させ、小さければ実行させずにそれまでに入ってしまっていた値となるstyle属性を削除する構成になっています。ナビゲーションエリア右サイド版ここまでのサンプルはナビゲーションエリアがページの左側にあるタイプでしたがその逆でナビゲーションエリアが右側にある場合はスクリプトの構成が少し変わってきます。HTML、CSS、スクリプトの基本構成は左タイプと同じなので詳しい解説は省きますがナビゲーションエリアが右に配置されたタイプのサンプルをレスポンシブ有無の2パターン紹介しておきます。以上がjQueryを使って画面から見切れることのない固定型ナビゲーションメニューを実装する方法でした。縦に長い固定型ナビゲーションメニューの設置が必要な場合にこの様な動作仕様にしておくことでユーザーにストレスを感じさせることなくサイト内の各ページへ遷移させる導線を確保できるかと思います。画面から見切れることのない固定型ナビゲーションメニューを実装する際にぜひ。PostsjQueryでレスポンシブメニューをアコーディオンタイプでシンプルに実装する方法jQueryでスクロール追尾型メニューリストを作ってみるjQueryでレスポンシブメニューを横スライドタイプでシンプルに実装する方法ThickBoxでモーダルウィンドウ枠をブラウザ枠を縮めても見切れないようにする方法。ThickBoxでモーダルウィンドウ枠をブラウザ枠を縮めても見切れないようにする方法。※コメントにHTMLタグを直接入力しないでください。※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。Webサイト構築に関する技術やWebサービスを紹介するブログです。jQueryをはじめとしたWebサイトを彩る技術のほか、HTML(HTML5)、CSS(CSS3)、iPhoneやTwitterを使った実験などなど、Webサイト制作に役立つであろうと思われる情報を備忘録として掲載しています。