コーディングメソドロジー

第64回 jQueryでつくるスクロール追従メニュー

cssで要素にposition:fixedを指定すると、スクロールに追従するメニューを簡単に作ることができます。
今回は、ヘッダーやフッターと重ならないように、jQueryで追従の開始と終了を制御します。

CSSの準備
下のようなレイアウトで、サイドメニューを追従させます。
サイドメニューには、position:absolute; を指定します。(01
実現したい動きは次の通りです。
  • ①ヘッダーが見えている間は、本来の位置に留まる。
  • ②スクロールしてヘッダーが見えなくなったら、追従を開始。
  • ③フッターの上まできたら、追従を終了してその場に留まる。
それぞれの状態をcssで定義します。(02
  • ページレイアウト

    ページレイアウト

  • 01 CSS

    CSS

  • 02 CSS

    CSS

jQueryで切替える
次に、スクロール量に応じて、classを付与・削除します。(03
要素の高さを組み合わせて、スクロール量と比較し、各ポイントでcssを切り替えます。
高さを取得する場合は、outerHeight(true)関数を指定することで、マージンを含めた高さを取得できます。
これで、スクロールに追従するサイドメニューができました。

03 Javascript

Javascript

画面下部に固定したメニューへの応用
メニューの固定位置を画面下部にする場合は、次のように設定することで、フッターの上で止まるようにできます。
メニューはフッターの中にいれ、一番上に配置します。
追従中は、メニューの高さ分の余白をあけておきます。(04-①
これより、css切り替え時の挙動がスムーズになります。
各ポイントとスクロール量と比較して、cssを切り替えます。(05

ページレイアウト

ページレイアウト

メニューは画面下部に固定表示されるが、フッターの上端とメニューの下端が重なると、その場に留まる。

04 CSS

CSS

05 Javascript

Javascript

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム