How to disable scrolling in the background when the mobile menu is open?
css, jquery
Solution
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");
}
Problem
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; } ```