Greetings. The menu works by clicking on the button, leaves. It overlaps the window completely (position absolute and z-index). But you need to ban the scroll under the window. I found two solutions, both workers, but it didn’t work out for my task.

Here are the js with which I change the classes at the button and the menu for opening and closing.

$(document).ready(function(){ var $topSide = $('#slidemenu'); $('#open-button').click(function () { $topSide.toggleClass('slidemenu-open'); $('#open-button').toggleClass('open-button-close'); }); });

But the options that can block the scroll: Option 1 and Option 2

Both perform normally, the first in my opinion is more compact, it does not require lib to connect, but it does not matter. The fact is that both options work by two separate buttons (on / off).

How can both functions be hung on a regular link or any other element (a, div, span) - so that it pokes a button: the menu opens, the scroll is blocked; Poked again - the menu was removed, the scroll works.

    3 answers 3

    Create a class in CSS with the overflow: hidden; property overflow: hidden; and hang on the <body> when opening the menu, delete when closing.

    • For the PC version, this option is not suitable, because it makes it impossible to scroll with the mouse only + removes the scroll bar itself - the screen starts to twitch. But I needed it for smartphones, so it’s good. Noted as an answer. - Aaron

    What is not an option to check the presence of a class?

     $('#open-button').click(function () { if(!$('#slidemenu').hasClass('slidemenu-open')) // если не было открыто меню, запретить скролл { disableScroll.on(); } else { disableScroll.off(); } $topSide.toggleClass('slidemenu-open'); // открыть меню $('#open-button').toggleClass('open-button-close'); }); });

      Instead of absolute, we use fixed and do not suffer from more perverted options for how to remove the scroll.

      • yes, yes, I made it fixed, but I still applied overflow hidden to the underlying layers - Aaron