如何使Y溢出：隐藏； 用jQuery工作？

Question

My goal is to make sure that on click my menu will be opened and for body it will add CSS option, which is overflow-y:hidden` in order to focus users' attention on menu only. So whenever user clicks menu button it will appear, and will not have that scroll that annoys users, however when menu closes it scroll obviously should work. How to achieve it ?

  $(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); } }); }); 

 #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; } 

 <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> 

Answer 1

You can use it

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