如何使溢出-y：隐藏;用jquery点击工作？ [英] How to make overflow-y: hidden; work on click with jquery?

问题描述

我的目标是确保点击我的菜单将被打开，并且对于 body 它将添加CSS选项，这是overflow-y：hidden`，以便只将用户的注意力集中在菜单上。所以无论何时用户点击菜单按钮，它都会出现，并且不会出现让用户烦恼的滚动，但是当菜单关闭时，滚动显然应该起作用。如何实现它？

$（document）.ready（function（）{$（＃code>）

<按钮）。click（function（）{$（'。slide'）。fadeToggle（500）;}）;}）; $（document）.ready（function（）{$（＃button）。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;宽度：100％; height：50px;背景：＃f0f0f0;位置：相对;宽度：100％; z-index：2;}＃main_header .text_ru {font-size：15px;颜色：rgb（12,89,163）;文字转换：大写; text-align：center;宽度：18px; height：11px;显示：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;宽度：100％;身高：100％;背景：＃000;不透明度：0.35;位置：固定; z-index：1; display：none;}。darklayer.active {display：block;溢出：隐藏; < script src =https://www.microsoft.com/downloads/details.aspx?displaylang=zh-cn&hl=zh-CNclass = 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.svgalt =logostyle =height：16px; padding-left：15px;>< / a> < p class =text_ru> ru< / p> < / DIV> < div class =right_header> < img class =btn searchsrc =svg / search.svgalt =searchstyle =height：18px; padding-left：15px; padding-right：30px; cursor：pointer;> < img class =btnsrc =svg / pro.svgalt =prostyle =height：18px; padding-left：15px; padding-right：30px; cursor：pointer;> < img id =buttonclass =btnsrc =svg / sandwich.svgalt =sandwichstyle =height：18px; padding-left：15px; padding-right：30px; cursor：pointer; > < / DIV> < / section>< / header>

  $（document）.ready（function（）{
 $（'button'）。on（'click'，function（）{
 $（'body'）。css（'overflow-y'，'hidden'）; 
}）; 
}）; 
  

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>

解决方案

You can use it

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

这篇关于如何使溢出-y：隐藏;用jquery点击工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！