スクロールでサイドメニューも消えるのをjQueryで固定
当サイトではCSSで固定する方法を利用しています。
但し、IE11以前、Edgeでは動作しません。 説明ページ → CSSで固定する方法
この方法は「jQuery」を使うことで対応できるのだが筆者は知識不足で、以下のサイトを参考にさせて頂いた。
ALL Aboutさん → スクロールの途中でサイドバーが消えないよう固定する
当サイトがWordPressで作成されている関係で、以下のサイトも参考にさせて頂いた。
(株)クーネルワークさん → WordPressでのダメなjQuery関数の囲み方4パターンと対策講座
手順は「ALL Aboutさん」の説明に沿って作成しているが、このサイトは「スマホ対応」でWordPressで作成されているの為、ページの表示デザイン(CSS)の関係で参考サイトとは若干異なっている。
ページデザイン上は同一だが、CSSの指定でメニューとコンテンツを左右に配置する場合、
A.メニューfloat:left コンテンツfloat:right
B.両方ともfloat:left 又は 表示領域の中をメニューとコンテンツで「%」指定
1.jQuery利用のパッケージを読み込む。
HTMLの headから/headの間かつ「wp-head()」の後 A.B.共通
1 |
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script> |
2.固定化の為のCSSを記述する
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 |
/* メディアクエリー 480px以下 スマホ用 */ @media only screen and (max-width: 480px) { /* スマホ用なので、ここには追加しない。 */ } /* メディアクエリー 481px以上780px未満 タブレット用 */ @media only screen and (min-width:481px) and (max-width:780px) { /* サイドメニューの固定化用として以下を追加 */ .fixBox { position: fixed; top: 10px;} #box2_content{ width:74.5%;} #side_menu_box{ width:23%;} .content_right{ /* A.の時は、不要 */ margin-left:24%;} /* A.の時は、不要 */ } /* メディアクエリー 780px以上 パソコン用 */ @media only screen and (min-width: 780px) { .fixBox { position: fixed; top: 0px;} #box2_content {width:73.5%;} #side_menu_box{ width:210px;} .content_right {margin-left:220px;} /* A.の時は不要 */ } |
B.の場合:「content_right」はメニューの領域を確保する為で、当サイトはメニューとコンテンツを「%」で指定している為。これを入れないとメニューとコンテンツが被ってしまう。「content_right」は、コンテンツのclass名。
☆ 注意:サイト全体のスタイルシートstyle.cssの中に、8~10行目の.fixBoxを入れてはいけません。
3.jQueryでマウスの上下スクロールでメニューの位置をコントロールする。
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 |
<script type="text/javascript"> // ページの読み込みが完了してから実行 jQuery(function(&) { // 途中から固定したいメニューのCSS情報をnavBoxに取得 var navBox = $("#side_menu_box"); // A.の場合:不要 コンテンツのCSS情報をcontentBoxに取得 var contentBox = $("#box2_content"); // メニューの上部位置情報をnavOstに取得 var navOst = navBox.offset().top; // スクロールされた際に実行 $(window).scroll( function() { // 現在のスクロール位置と固定したいボックスの位置を比較し、スクロールが初期のメニュー位置を超えたとき if( $(window).scrollTop() > navOst ) { // #side_menu_box(navBox)に固定するためのfixboxのCSSを追加 navBox.addClass("fixBox"); // A.の場合:不要 コンテンツにメニュース領域を確保するCSSを追加 contentBox.addClass("content_right"); } else { // #side_menu_boxに追加されたfixBoxの部分を削除 navBox.removeClass("fixBox"); // A.の場合:不要 content_rightの部分を削除 contentBox.removeClass("content_right"); } }); }); </script> |
- 行番
- 説 明
- 5
- #side_menu_boxは、固定するサイドメニューボックスの「id名」
- 7
- #box2_contentは、コンテンツを表示するボックスの「id名」