I'm having an issue with a mobile navigation menu I created. It's a simple hamburger icon that, when clicked, opens a fullscreen menu. The problem is that I want to prevent scrolling when the overlay is visible. I tried using this code:
$('body').bind('touchmove', function(e){e.preventDefault()});
However, this doesn't toggle within the click event. How can I make it so that scrolling is disabled when the menu is open and enabled again when the menu is closed? Here's the full script:
$(document).ready(function () {
$(".icon").click(function () {
$('body').bind('touchmove', function(e){e.preventDefault()});
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
});