为什么我的按钮无法禁用overflow-y：hidden？

Question

I'm trying to achieve that my button will be responsive. In precise, on first click when menu opens it darkens the entire screen and highlight the menu, as well as overflow-y:hidden starts working since my goal is to make sure when menu opens it won't have any scroll. There when the main issue starts to appear, overflow hidden takes place and I cannot switch off when I click on menu button again. How to achieve this ?

my previous jquery:

$("#button").click(function(){
        $('.slide').fadeToggle(500);
        $('.darklayer').toggleClass('active');
        $('body').css({'overflow-y': 'hidden'});
});

here is my new jquery:

$("#button").click(function(){
        var $dark = $('.darklayer');
        $('.slide').fadeToggle(500);
        ($dark).toggleClass('active');
            if($dark.is(':active')) { 
                $('body').css({'overflow-y': 'hidden'});
            }
            else {
                $('body').off('click');
            }
    }});

My HTML:

<div class="darklayer"></div>
    <header id="main_menu">
            <div id="menu">
                <ul class="slide">
                    <li><a href="#">Поиск строения</a></li>
                    <li><a href="#">Оплатить ком услуги</a></li>
                    <li><a href=#>Обратиться за помощью</a></li>
                    <li><a href=#>Управляющая компания</a></li>
                    <li><a href="second_page.html">Обратиться в Акимат</a></li>
                    <li><a href=#>Объявления</a></li>
                    <li><a href="page.html">Информация о строении</a></li>
                    <li><a href=#>Обсуждения</a></li>
                    <li><a href=#>Помощь</a></li>
                </ul>
            </div>
            <section id="main_header">
                <div class="left_header">
                    <a href="index.html"><img src="svg/logo.svg" alt="logo" style="height: 16px; padding-left: 15px;"></a>
                    <p class="text_ru">ru</p>
                </div>
                <div class="right_header">
                    <img class="btn search" src="svg/search.svg" alt="search" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer; ">
                    <img class="btn" src="svg/pro.svg" alt="pro" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer;">
                    <img id="button" class="btn" src="svg/sandwich.svg" alt="sandwich" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer;">
                </div>
            </section>
        </header>

Answer 1

try this: user hasClass as shown below

$("#button").click(function(){
        var $dark = $('.darklayer');
        $('.slide').fadeToggle(500);
        $dark.toggleClass('active');
            if($dark.hasClass('active')) { 
                $('body').css({'overflow-y': 'hidden'});
            }
            else {
                $('body').off('click');
            }
    }});

Answer 2

I think your problem in if statement you can use

if($dark.hasClass('active'))

instead of

if($dark.is(':active'))

Answer 3

Can you try this?

        if($dark.is(':active')) { 
            $('body').css({'overflow-y': 'hidden'});
        }
        else {
            $('body').css({'overflow-y': 'visible'});
        }