2

Пытаюсь управлять высотой блока (с меню) в зависимости от скролла страницы. Фактически - скрипт работает, но эстетически не совсем правильно.

Идея: есть блок с высотой равной 100vh (по умолчанию), в зависимости от скролла страницы (pageYOffset) высота этого блока уменьшается на (pageYOffset), пока не станет равна минимальному значению в 150px.

Проблема: вопрос в том, что по мере физического скроллинга страницы мышью, изменение высоты происходит с опозданием на 1-2 секунды, из-за чего блок выходит за пределы своего родителя.

html размер

$('#nav__menu').on('click', function() {
  $('.nav').toggleClass('nav__active')
})

var block = document.querySelector('.nav');

window.addEventListener('scroll', function() {
  var scroll = window.pageYOffset;
  var browserHeight = document.documentElement.clientHeight;
  var height = scroll < (browserHeight - 150) ? Math.floor(browserHeight - scroll) : 150;
  block.style.height = height + 'px';
})
.nav {
  display: flex;
  flex-direction: column;
  background-color: $gray;
  width: 75px;
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  transition: all .4s linear;
  align-items: center;
  z-index: 199;
  .nav__lang {
    display: flex;
    flex-direction: column;
    width: 100%;
    ul {
      list-style: none;
      padding: 0;
      padding-inline-start: 0px;
      margin-bottom: 0rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      li {
        a {
          color: #fff;
          font-weight: lighter;
        }
      }
    }
  }
  .nav__content {
    display: none;
    height: calc(100vh - 50px - 2rem);
    justify-content: center;
    flex-direction: column;
    width: 100%;
    padding: 0 2rem;
    ul {
      list-style-type: none;
      padding-inline-start: 0;
      margin-bottom: 0rem;
      li {
        position: relative;
        a {
          color: #fff;
          text-transform: lowercase;
          font-size: 1.5rem;
          font-weight: lighter;
          &:hover {
            text-decoration: none;
            opacity: .7;
          }
        }
        &::after {
          content: '';
          display: block;
          width: 0;
          height: 1px;
          background-color: #fff;
          opacity: 1;
          position: absolute;
          transition: all .5s ease;
        }
        &:hover::after {
          width: 80%;
          transition: all .5s ease;
          opacity: .7;
        }
      }
    }
  }
  .btn {
    box-shadow: none;
    border: none;
    height: 50px;
    i {
      color: #fff;
      font-size: 1.5rem;
    }
    &:active,
    &:focus {
      box-shadow: none;
      border: none;
    }
  }
  @media (max-width: 812px) and (max-height: 375px) and (orientation: landscape) {
    display: none;
  }
  @media (max-width: 736px) and (orientation: landscape) {
    display: none;
  }
  @media (max-width: 536px) {
    display: none;
  }
}

.nav__active {
  width: 300px;
  transition: all .4s linear;
  align-items: flex-end;
  flex-direction: column;
  height: 100vh!important;
  z-index: 399;
  .nav__lang {
    display: flex;
    ul {
      flex-direction: row;
      justify-content: flex-start;
      padding: 0 2rem;
      li {
        margin-right: 1rem;
        &:last-child {
          margin-right: 0rem;
        }
      }
    }
  }
  .nav__content {
    display: flex;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<nav class="nav">
  <button class="btn" id="nav__menu"><i class="fas fa-bars"></i></button>
  <div class="nav__lang">
    <ul>
      <li><a href="#">Eng</a></li>
      <li><a href="#">Ru</a></li>
      <li><a href="#">De</a></li>
    </ul>
  </div>
  <div class="nav__content">
    <ul>
      <li><a href="#">главная</a></li>
      <li><a href="#projects">проекты</a></li>
      <li><a href="#">концепции</a></li>
      <li><a href="#">блог</a></li>
      <li><a href="#">контакты</a></li>
    </ul>
  </div>
</nav>

За образец принимался этот сайт https://www.wk-wohnen.de/de-DE/home/

Записал в gif что происходит, дабы стало понятнее)

http://g.recordit.co/diS70C59sT.gif

2
  • И зачем всё это, если можно сделать как на том сайте, на который вы дали ссылку? Там ничего не изменяется, но за счет одинакового цвета полоски и навигации создается такой эффект.
    – user355286
    18 апр 2020 в 13:10
  • @hu-fo да я понимаю, просто пока "дошло" как у них реализовано, интерес всё таки остался))) 18 апр 2020 в 13:58

1 ответ 1

4

body {
  height: 400vh;
  background-color: lightblue;
}

body::before {
  content: "";
  position: absolute;
  
  top: 0;
  right: 0;
  
  width: 10vw;
  height: 150vh;
  background-color: lightgreen;
}

nav {
  position: fixed;
  top: 0;
  right: 0;
  
  width: 10vw;
  height: 20vh;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  font-weight: bold;
  font-size: 5vw;
  
  background-color: lightgreen;
}
<nav>=</nav>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.