現在のスクロール位置を維持したまま、モーダルの背景を固定する【jQueryメモ】

はじめに

jQueryを学んだ際のメモです!
まだ学び始めたばかりなので、もっと良い方法があるかもしれません!
(あともし処理の解釈間違ってるよとかあったらこっそり教えてください)

なにが嬉しいか

モーダルを開いた際に、意図せず背景がスクロールしてしまったり、
モーダルを閉じた際に、スクロール位置が変わってしまうと、
どの情報を見ていたのか見失ってしまいますよね。
そんな状況を防ぐことができるので、嬉しい!という訳です。
どんな些細な機能を実装するときも、ただすごいだけじゃなくてユーザーさんが嬉しいかどうか。考えることってだいじですよね(`・ω・´)

どんなことをやっているのか

  • モーダルを表示した時

  >モーダルを開いた時点でのスクロール位置を取得
   $(window).scrollTop();

  >body要素を現在のスクロール位置の分topマイナスした状態(=現在のスクロール位置)で固定
   'top': -pointY

  • モーダルを閉じる時

  >body要素の固定を解除
  >モーダルを開いた時点でのスクロール位置に.scrollTopで戻す

上記の流れを実際に書くと...

モーダルを表示する時に実行

//---------背景を固定する処理--------------
function fixScroll(){
    //pointYに現在のスクロール位置の値を格納
    pointY = $(window).scrollTop();

    $('body')
    .css({
        //body要素のtopプロパティをpointYの値マイナスして現在のスクロール位置で固定(何もしないと最上部で固定)
        'position': 'fixed',
        'top': -pointY,
        //fixedすると左上固定されるので、widthを100%にすることで防止
        'width': '100%'
    });
};

モーダルを閉じる時に実行

//------モーダルを閉じた時もとのスクロール位置に戻すための処理----------
function scrollRelease(){
    //body固定を解除する
    $('body').css({
        'position': '',
        'width': '',
        'top': ''
    });
    //scrollTop() の引数に現在のスクロール値を指定して、現在のスクロール位置に戻す
    $(window).scrollTop(pointY);
};

以上になります!