JQuery Dimmer和No Scrolling不会一起工作

时间：2017-02-22 22:49:17

标签： jquery html css

当我的网站处于移动视图时，我有一个汉堡菜单，我用JQuery打开和关闭。这样可以正常工作，但为了更加专注于此，我尝试为主内容添加调光效果，并尝试在显示汉堡菜单时阻止滚动到主内容。然而，当我这样做时，我可以得到调光器工作或不滚动单独工作（如果我注释掉一个或另一个）但由于某种原因他们不能合并时工作，我不知道为什么（如下）。此外，当只是没有滚动它跳到身体的底部，我宁愿不是这种情况。我是JQuery的新手，所以如果我所做的事情可以简化或做得更好，请告诉我。

JQuery的：

jQuery(document).ready(function () {
jQuery('#toggle-nav').click(function (e) {
event.stopPropagation();
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
jQuery('.hamburgerWrapper').toggleClass('active');

//Dimmer
jQuery('.dimmer').toggleClass('active');

//No Scrolling
jQuery('.main').toggleClass('no-scrolling');

e.preventDefault();
});
});

CSS：

.main
{
    background-color: white;
    width: 100%;
}

.mainWrapper
{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: white;
    flex: 1;    
}

/*NAVIGATION MENUS*/
.nav
{
    background-color: blue;
    z-index: 1;
}

.navWrapper
{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
    flex-grow: 1;
}

/*HORIZONTAL MENU*/
.menu
{
    flex-grow: 1;
}

.menu ul.navList
{
  list-style: none;
  position: fixed;
  left: -60%;
  background: blue;
  min-width: 60%;
  transition: all 600ms ease;
  z-index: 1;
}

.menu ul.active {
  left: 0;
  transition: all 300ms ease;
}

.menu > ul > li > a
{
    text-align: left;
    display:block;
    color: #F5F5F5;
    padding:16px 16px 12px 16px;
    border-bottom:4px solid transparent; /*To offset white underline hover*/
    font-weight: 700;
}

.menu > ul > li a:hover
{
    background-color: green;
    border-bottom: 4px solid #F1F227;
    color: #C5EFF7;
    transition: 1s ease-out;
}

/*HAMBURGER*/
.hamburgerWrapper
{
    display: flex;
    flex-grow: 1;
    justify-content: flex-start;
    left: 0;
    position: absolute;
    width: 100%;
    background-color: blue;
    transition: all 600ms ease;
    z-index: 2;
    vertical-align: middle;
}

.hamburgerWrapper.active
{
    left: 60%;
    transition: all 300ms ease;
    padding-left: 20px;
}

.hamburger
{
    list-style-type: none;
}

.hamburger li a
{
    text-align: center;
    display:block;
    color: #fff;
    padding:16px 16px 15px 16px;
    cursor: pointer;
    font-weight: 700;
}

#toggle-nav:after {
    padding-left: 20px;
    display: inline-block;
    vertical-align: middle;
    content: 'Menu';
}

#toggle-nav span, #toggle-nav span:before, #toggle-nav span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: white;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
#toggle-nav span:before {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  top: -10px; 
}
#toggle-nav span:after {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;
}

#toggle-nav span, #toggle-nav span:before, #toggle-nav span:after {
  transition: all 500ms ease-in-out;
}
#toggle-nav.active span {
  background-color: transparent;
}
#toggle-nav.active span:before, #toggle-nav.active span:after {
  top: 0;
}
#toggle-nav.active span:before {
  transform: rotate(45deg);
}
#toggle-nav.active span:after {
  transform: rotate(-45deg);
}

/*Sub Menu*/
.menu > ul > li:hover > ul
{
    display: block;
}

.submenu
{
    display:none;
    position:relative;
    background-color: blue;
    white-space: nowrap;
    min-width : 100%;
    list-style-type: none;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4);
}

.submenu > li > a
{
    text-align: left;
    display:block;
    color: #fff;
    padding:16px 16px 12px 26px;
    border-bottom:4px solid transparent; /*To offset white underline hover*/
    font-weight: 500;
}

.submenu > li:hover > a
{
  background-color: green;
  color: #FFDB00;
  border-bottom: 4px solid #F1F227;
  transition: 1s ease-out;
}

/*Child Sub Menu*/
.menu > ul > li > ul > li:hover > ul 
{
    display: block;
}

.subSubmenu
{
    display:none;
    position:relative;
    background-color: blue;
    white-space: nowrap;
    min-width: 100%;
    list-style-type: none;
    bottom: 100%;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4);
}

.subSubmenu > li > a
{
    text-align: left;
    display:block;
    color: #fff;
    padding:19px 16px 12px 36px;
    border-bottom:4px solid transparent; /*To offset white underline hover*/
    font-weight: 300;
}

.menu > ul > li > ul > li:hover > ul > li:hover > a
{
  background-color: green;
  color: #C5EFF7;
  border-bottom: 4px solid #F1F227;
  transition: 1s ease-out;
}

   /*set up the right arrows first*/
   .menu li > a:after { content: ' \25B6'; }

   /*set up the downward arrow for top level items*/
   .menu > ul > li > a:after {content: ' \25BC'; }

   /*clear the content if a is only child*/
   .menu li > a:only-child:after {content: ''; }

/*Dimmer to dim background and no scolling when Hamburger menu is shown*/
.dimmer {
  z-index: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
}

.dimmer.active 
{
  display: block;
}

.no-scrolling 
{
  overflow: hidden;
  position: fixed;
}

HTML：

<div id="container">
<div class="nav">
<div class ="navWrapper">
<nav role="navigation" class="menu">  
    <div class="hamburgerWrapper">
        <ul class="hamburger">
    <li><a id="toggle-nav" href="#"><span></span></a></li>
        </ul>
    </div>
    <ul class="navList">
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li>
        <a href="MainPage.aspx">Menu 3</a>
            <ul class="submenu">
                <li><a href="#">Sub 1</a></li>
                <li><a href="#">Sub 2</a></li>
            </ul>
        </li>  
        <li>
        <a href="#">Menu 4</a>   
            <ul class="submenu">
                <li><a href="#">Sub 3</a></li>
                <li><a href="#">Sub 4</a></li>
            </ul>
        </li>
    </ul>
    <div class="hamburgerWrapper">
          <div class="toggle-nav"><a href="#">Menu</a></div>
    </div>
</nav>
</div>
</div>
</div> 

<div class="dimmer"></div> 

<div class="main">
<main role ="main" class="mainWrapper">
</main>
</div>

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script src="../Javascript/JavaScript.js"></script>

1 个答案:

答案 0 :(得分：0)

我设法通过将无滚动元素和Jquery应用于Body而不是main来实现此功能。我不太确定为什么它不能对抗主要但它现在无论如何都按预期工作。我更改的代码部分如下：

CSS：

body.no-scrolling 
{
overflow: hidden;
}

JQuery的：

    //No Scrolling
    jQuery('body').toggleClass('no-scrolling');
相关问题
最新问题