, ,

[HTML & CSS General] Modal や Menu を開いた時に背景のページスクロールを止める

公開日: 2019/10/08

ちょっと memo.

大まかな手順としては下記になりますね。

  • body に position: "fixed" を付与する。
  • スクロール量を覚えておき、閉じたときに戻す。

後は実装にあわせて調整します。

  • クリックすると collapsed というクラスが追加されるボタンがある。
  • collapsed のあるなしで開いているか閉じているかを判定。
  • 横幅がずれないように width を。ヘッダーの処理で margin-top をここでは調整している。

該当箇所をちょっと抜き出したコード。

const win = $(window);

$(".navbar-toggler").on("click", function() {
  if ($(this).hasClass("collapsed")) {
    const position = win.scrollTop();

    $("body").css({
      position: "fixed",
      top: -1 * position,
      width: "100vw",
      marginTop: 0
    });
  } else {
    const position = $("body").css("top");

    $("body").css({
      position: "",
      top: "",
      width: "inherit",
      marginTop: "46px"
    });

    win.scrollTop(parseInt(position, 10) * -1);
  }
});