Need Help with JS that Prevents Background from Scrolling in Full Screen Menu

Design help Animations & Interactions
1

Hey everyone,

When the full-screen hamburger menu is opened, I want the background scrolling to be disabled.

I found this JS that should do the job, however, I only use one class ‘.c-menu-button-container’ to open and close the menu.

$('.open').on('click', function(){
  $('body').addClass('no-scroll');
});

$('.close').on('click', function(){
  $('body').removeClass('no-scroll');
});

Is there a way to say that on the first click it should add the ‘no-scroll’ class to the body and to remove it on the second click?

Thanks!

2

I have absolutely no idea how to achieve this using the same button to click,

but

I’m just thinking out loud here - could you tie the “disable scroll” script to your button for when the menu opens, and also tie an interaction to it that hides the button, replaces it with an identical-looking one with a different class, and triggers the “allow scroll” script?

So it would be something like this:

Button 1: Click = menu open, activate the disable scroll script, hide button 1 & replace with button 2 (interaction).

Button 2: Appears due to the interaction from Button 1. Click = menu close, disable the disable scroll script, hide button 2 and replace with button 1

Just thinking out loud - I’ve not tested this so no idea if it would work. I suck at coding so often have to try and be a bit creative with how I go about things!