*

ウェッブ制作

Width =px

ホーム > 変化を付ける小技 >
jQuery・サイドメニュー固定 MENU 

スクロールでサイドメニューも消えるのを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.共通


2.固定化の為のCSSを記述する

B.の場合:「content_right」はメニューの領域を確保する為で、当サイトはメニューとコンテンツを「%」で指定している為。これを入れないとメニューとコンテンツが被ってしまう。「content_right」は、コンテンツのclass名。

☆ 注意:サイト全体のスタイルシートstyle.cssの中に、8~10行目の.fixBoxを入れてはいけません。


3.jQueryでマウスの上下スクロールでメニューの位置をコントロールする。

  • 行番
  • 説 明
  • 5
  • #side_menu_boxは、固定するサイドメニューボックスの「id名」
  • 7
  • #box2_contentは、コンテンツを表示するボックスの「id名」