@Alex1265
I love IT

Как правильно сделать меню так чтобы она при прокрутке прилипала к верхней части экрана?

Хочу что бы при прокрутке сайта меню не исчезало а прилипло.. Как правильно все оформить и какое решение актуально?
  • Вопрос задан
  • 128 просмотров
Пригласить эксперта
Ответы на вопрос 3
delphinpro
@delphinpro
frontend developer
<div class="fixed-bar">...</div>
.fixed-bar {
  transition: 0.7s ease;
  transition-property: transform, box-shadow;
  height: 50px;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 100;
  transform: translateY(-100%);
}

.fixed-bar.isShown {
  box-shadow: 0 0 10px black;
  transform: translateY(0);
}


const fixedBar = document.querySelector('.fixed-bar');

const toggleBar = function () {
  let isShown = window.pageYOffset > window.innerHeight / 2;
  fixedBar.classList.toggle('isShown', isShown);
}

toggleBar();
window.addEventListener('scroll', toggleBar);


Демо:
Ответ написан
iamd503
@iamd503
Верстальщик
position: fixed
Ответ написан
@forspamonly2
position: sticky
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы