How to disable scrolling in the background when the mobile menu is open?

Question

I am building a mobile responsive website that has a nav menu. When I get to the bottom of the menu - If I continue scrolling when I reach the bottom of the menu - it scrolls the page in the background. How can I disable it?

This is my jQuery code so far:

// When the document is loaded... $(document).ready(function() {      $('#mob-menu-btn').click(function(){         $('.sports').slideToggle("slow");     })      $('#sub-menu').click(function(){         $('.sports2').slideToggle("slow");     })  }); 

and this is my CSS:

    .list{         width: 100%;         overflow: hidden;         overflow-y: auto;         top: -10%;         overflow: hidden;         overflow-y: auto; }       .sports li{         list-style-image:none;         list-style-type: none;         border-bottom: 2px solid #eeeeee;         margin-bottom: 0px;          margin-left: 0px;          padding-top: 15px;         padding-bottom: 15px;         padding-left: 10px;         width:100%;         font-family: arial;         text-decoration: none;         overflow: hidden;     } 

Answer 1

When a menu is open, set position: fixed on the body, and remove on close.

 .fixed-position {     position: fixed;  }   if ($('#mob-menu').is(':visible')) {     $('body').addClass("fixed-position");  } else {     $('body').removeClass("fixed-position");  }