ハンバーガーメニューの表示時にコンテンツをスクロールさせない ( 背景固定 ) 処理

[ ID : 2341 ]
シルバー
ハンバーガーメニューの表示時にコンテンツをスクロールさせない ( 背景固定 ) 処理

概要

【jQuery】スマートフォンでよく使われるハンバーガーメニュー(SPメニュー)を開いた状態の時、コンテンツ(背景)をスクロールさせずに固定させるための処理。
※overflow hiddenは不使用

用途・要件

  • スマートフォンメニュー(ハンバーガーメニュー)を開いた時にコンテンツ(背景)をスクロールさせずに固定したい。
  • jQuery バージョン3.6.0使用。

内容

  • スマートフォン(SP)でもコンテンツ固定が有効(overflow hiddenではない処理を実装)。
  • ハンバーガーメニューの開閉アニメーションあり。

注意事項

  • media-queryは含めていないため(PCでもハンバーガー状態)、必要に応じてブレイクポイントを入れて下さい。
  • グローバルナビゲーション(.header-nav)は.headerもしくは.header-container内に配置してください。

検証ブラウザ

  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)
  • Microsoft Edge(最新)
  • IE11

実装方法

コンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

新着記事

全ての記事を見る

KONOCODEのメリット 無料会員登録