Как исправить баг sticky topbar + выпадающие меню?

228

19 января 2019, 00:40

Есть topbar для мобильной навигации, при скороле использую sticky от foundation, что бы прикрепить его к верхней части страницы. Когда полностью открывается меню/подменю оно больше чем основной контент страницы. Sticky + открытое подменю дает баг, что не возможно проскролить и увидеть полностью меню, в данном примере при открытом меню сначала скролится страница, а после меню, тогда как у меня на проекте оно вобще не скролится. Пытался убрать скролл у html и добавить его к блоку с навигацией, но не получилось. Подскажите, как можно реализовать скрол у навигации пока открыто меню? Или как подругому или более правильный вариант реализации данной задачи?

$(document).foundation(); 
$(".js-show-sub").on("click", function(event) { 
  event.stopImmediatePropagation(); 
  event.preventDefault(); 
  $(".nav__item--is-active").removeClass(".nav__item--is-active"); 
  $(this).parents("li").addClass("nav__item--is-active"); 
});

.header { 
  height: 200px; 
  background-color: #eaeaea; 
} 
 
.item { 
  height: 300px; 
  margin-bottom: 20px; 
  background-color: #eaeaea; 
} 
 
//****// 
.x-nav { 
  height: 40px; 
  background-color: #193768; 
  z-index: 2; 
} 
 
@media screen and (min-width: 48em) { 
  .x-nav { 
    height: auto; 
  } 
} 
 
.x-nav__mobile-bar { 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
  height: 100%; 
  padding: 0 1.25rem; 
  -webkit-justify-content: space-between; 
  -ms-flex-pack: justify; 
  justify-content: space-between; 
  -webkit-align-items: center; 
  -ms-flex-align: center; 
  align-items: center; 
  background-color: #193768; 
  z-index: 5; 
  transition: background-color 150ms ease-in-out; 
} 
 
.x-nav__mobile-bar--is-active { 
  background-color: #318dde; 
  transition: background-color 150ms ease-in-out; 
} 
 
.x-nav__desctop { 
  z-index: -1; 
} 
 
.x-nav__desctop { 
  display: none; 
} 
 
.nav { 
  width: 100%; 
  background-color: #193768; 
} 
 
.nav__list, 
.nav__inner { 
  margin: 0; 
  padding: 0; 
} 
 
.nav__inner { 
  display: none; 
  width: 100%; 
  padding-left: 0.625rem; 
  background-color: #1e427d; 
} 
 
.nav__item { 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-flex-wrap: wrap; 
  -ms-flex-wrap: wrap; 
  flex-wrap: wrap; 
  -webkit-justify-content: space-between; 
  -ms-flex-pack: justify; 
  justify-content: space-between; 
  -webkit-align-items: middle; 
  -ms-flex-align: middle; 
  align-items: middle; 
  transition: background-color 150ms ease-in-out; 
} 
 
.nav__item:hover { 
  background-color: #318dde; 
  transition: background-color 150ms ease-in-out; 
} 
 
.nav__item--is-active .nav__inner { 
  display: block; 
} 
 
.nav__link { 
  padding: 0.625rem 0.9375rem; 
  -webkit-flex: 1; 
  -ms-flex: 1; 
  flex: 1; 
  font-size: 1.125rem; 
} 
 
 
} 
.nav__dropdown { 
  width: 45px; 
  padding: 0.625rem; 
  background-color: #16305c; 
  text-align: center; 
} 
.nav__link, 
.nav__link:hover, 
.nav__link:focus { 
  color: #ffffff; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.0-rc.3/dist/js/foundation.min.js"></script> 
<link href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.0-rc.3/dist/css/foundation.min.css" rel="stylesheet" /> 
 
<header class="header" id="header">HEADER</header> 
<div class="x-layout__nav" data-sticky-container> 
  <div class="x-nav sticky" data-sticky data-options="marginTop: 0;" data-top-anchor="header:bottom"> 
    <div class="x-nav__mobile-bar" data-toggler=".x-nav__mobile-bar--is-active" id="mobile-bar"> 
      <div class="x-nav__toggler"> 
        <span class="humburger" data-toggle="nav mobile-bar" style="color: #fff; cursor: pointer;">Show menu</span> 
      </div> 
      <div class="x-nav__lang" style="color: #fff;"> 
        ENG 
      </div> 
    </div> 
    <nav class="nav sticky x-nav__desctop" id="nav" data-toggler data-animate="slide-in-down slide-out-up"> 
      <ul class="nav__list"> 
        <li class="nav__item"> 
          <a href="news.html" class="nav__link js-show-sub">Click!</a> 
          <ul class="nav__inner"> 
            <li class="nav__item"><a href="news.html" class="nav__link">Item 1.1</a></li> 
            <li class="nav__item"><a href="news.html" class="nav__link">Item 1.2</a></li> 
            <li class="nav__item"><a href="news.html" class="nav__link">Item 1.3</a></li> 
            <li class="nav__item"><a href="news.html" class="nav__link">Item 1.4</a></li> 
            <li class="nav__item"><a href="news.html" class="nav__link">Item 1.5</a></li> 
            <li class="nav__item"><a href="news.html" class="nav__link">Item 1.6</a></li> 
            <li class="nav__item"><a href="news.html" class="nav__link">Item 1.8</a></li> 
            <li class="nav__item"><a href="news.html" class="nav__link">Item 1.9</a></li> 
            <li class="nav__item"><a href="news.html" class="nav__link">Item 1.10</a></li> 
            <li class="nav__item"><a href="news.html" class="nav__link">Item 1.12</a></li> 
            <li class="nav__item"><a href="news.html" class="nav__link">Item 1.13</a></li> 
          </ul> 
        </li> 
        <li class="nav__item"> 
          <a href="news.html" class="nav__link js-show-sub">Item 2</a> 
        </li> 
        <li class="nav__item"> 
          <a href="news.html" class="nav__link js-show-sub">Item 3</a> 
        </li> 
        <li class="nav__item"> 
          <a href="news.html" class="nav__link js-show-sub">Item 4</a> 
        </li> 
        <li class="nav__item"> 
          <a href="news.html" class="nav__link">Item 5</a> 
        </li> 
        <li class="nav__item"> 
          <a href="news.html" class="nav__link">Item 6</a> 
        </li> 
        <li class="nav__item"> 
          <a href="news.html" class="nav__link">Item 7</a> 
        </li> 
      </ul> 
    </nav> 
  </div> 
</div> 
<div class="content"> 
  <div class="item"></div> 
  <div class="item"></div> 
  <!--<div class="item"></div> --> 
</div>

Answer 1

.nav { overflow: auto; max-height: 100vh; }