如何使溢出-y：隐藏;用jquery点击工作？

Question

我的目标是确保点击我的菜单会被打开，body它会添加CSS选项，这是溢出-y：hidden`以便聚焦用户＆＃39;只关注菜单。因此，每当用户单击菜单按钮时，它将出现，并且不会有令用户烦恼的滚动，但是当菜单关闭时，滚动显然应该起作用。怎么实现呢？

＆＃13;

＆＃13;

    $(document).ready(function() {
    $("#button").click(function() {
        $('.slide').fadeToggle(500);
    });
});

$(document).ready(function() {
    $("#button").click(function() {
        console.log('click');
        $('.darklayer').toggleClass('active');
    });
});

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

＆＃13;

#main_header {
  opacity: 1;
  width: 100%;
  height: 50px;
  background: #f0f0f0;
  position: relative;
  width: 100%;
  z-index: 2;
}

#main_header .text_ru {
  font-size: 15px;
  color: rgb(12, 89, 163);
  text-transform: uppercase;
  text-align: center;
  width: 18px;
  height: 11px;
  display: inline-block;
  font-weight: 500;
  margin-left: 20px;
}

p.text_ru {
  line-height: 1.929;
}

#main_header .left_header {
  float: left;
}

#main_header .right_header {
  float: right;
  padding: 15px 15px;
}

.darklayer {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.35;
  position: fixed;
  z-index: 1;
  display: none;
}

.darklayer.active {
  display: block;
  overflow: hidden;
  max-width: 768px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以使用它

$(document).ready(function() {
  $('button').on('click', function() {
    $('body').css('overflow-y', 'hidden');
  });
});