Stop User Scroll While Menu is Open

When using a full page or half page menu, you often want to prohibit a user from scrolling on your page while the menu is open. This is how you can do that with a few lines of jQuery.

$("menu-open-button").click(function () {
  $("body").css("overflow", "hidden");
});

$("menu-close-button").click(function () {
  $("body").css("overflow", "visible");
});

This requires you to have a menu button with a class of "menu-open-button" and a close button with a class of "menu-close-button".

If you want to open and close the menu using the same button, the code would look like this:

$("menu-button").click(function () {
  if ($("menu").is(":visible")) {
    $("body").css("overflow", "hidden");
  } else {
    $("body").css("overflow", "visible");
  }
});

This requires you to have a menu button with a class of "menu-button" and a menu with a class of "menu".