スマホのハンバーガーメニューを作って最前面にモーダルウィンドウを画面いっぱいに作るとその中のコンテンツがスクロールし終わると後ろのコンテンツがスクロールさえれてしまう現象が多々ある。

それを防ぐにはどうしたらよいか。ネットのブログなどで色々あると思うがハンバーガーメニューをクリックした際にbodyに対してover-flow-y:noneを付与するのが一番シンプルで分かりやすいのではないかと思う。

(function($){
　$(".menu-icon").on("click", function () {
  　if ($(".nav").css("display") === "block") {
    　$(".nav").slideUp("100");
    　$('body').css('overflow-y','auto');
  　} else {
    　$(".nav").slideDown("100");
    　$('body').css('overflow-y', 'hidden'); 
  }
});

上記のようにアイコンをクリックしたときにあらかじめnavにはdisplay:blockなどを付与しておきそこからnavをスライドさせ表示非表示にさせる。

その時に一緒にbodyに対してoverflow-y:hiddenを付与することにより表示させたnavの後ろで背面スクロールを禁止する。そうすれば余計な動作もしない。

どこかのタイミングでnavのクラス（noneとかblockとか）を付与しなければいけないがそれは場合に依る。そこは以上のコードに追加すればよい。