Как создать меню с таким эффектом? - PullRequest
Новая
       18

Как создать меню с таким эффектом?

1 голос
/ 12 марта 2019

Попытка создать меню с - этим эффектом .

Мой код 

var lastScroll = 0;

    window.onscroll = function() {
      var navbar = document.querySelector('.navbar');
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      var body = document.querySelector('body');

      if (lastScroll - scrollTop > 0) {
        body.classList.add('body-fixed');
        navbar.classList.add('fixed');
      } else {
        body.classList.remove('body-fixed');
        navbar.classList.remove('fixed');
      }

      lastScroll = scrollTop;

    }


var lastScroll = 0;

window.onscroll = function() {
  var navbar = document.querySelector('.navbar');
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  var body = document.querySelector('body');

  if (lastScroll - scrollTop > 0) {
    body.classList.add('body-fixed');
    navbar.classList.add('fixed');
  } else {
    body.classList.remove('body-fixed');
    navbar.classList.remove('fixed');
  }

  lastScroll = scrollTop;

}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 2000px;
}
body.body-fixed{
  padding-top: 60px;
}

.navbar {
  padding-top: 40px;
  padding-bottom: 40px;
  background: #00f;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  transition: padding 0.3s ease;
}

.navbar.fixed {
  position: fixed;
  padding-top: 30px;
  padding-bottom: 30px;
}
<nav class="navbar"></nav>

Я не могу создать эффект, чтобы меню плавно исчезало при прокрутке страницы вниз.Не могу понять, как это реализовано на примере сайта.

Подскажите, как правильно реализовать этот эффект для меню.

Заранее спасибо.Буду рад любой помощи.

1 Ответ

0 голосов
/ 12 марта 2019

Плавный перевод выполняется с использованием свойства css transform: translate(0px, 0px), модифицированного правильными значениями при прокрутке.

Вместо добавления класса вы можете напрямую изменить стиль элемента, используя js.

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate

Возможно, вы захотите изучить CSS-переходы.

...