0

Как называются такие шапки, которые прозрачные когда находятся вверху, при опускании страницы меняют свой бг колор? И, есть какие-то готовые инструменты для реализации такой шапки?


Вот пример шапки: https://p.w3layouts.com/demos/19-02-2016/rental/web/

1 ответ 1

0

Такое можно сделать при помощи custom properties и слушателя скролла.

document.addEventListener('scroll', function (e) {
  if (window.pageYOffset > 150) {
    document.documentElement.style.setProperty('--opacity', 0.5);
  } else {
    document.documentElement.style.setProperty('--opacity', 1);
  }
});
:root {
  --opacity: 1;
}

body {
  margin: 0;
  height: 300vh;
}

header {
  background-color: rgba(0, 0, 0, var(--opacity));
  height: 50px;
  padding: 1em;
  width: 100vw;
  position: fixed;
  text-align: center;
  transition: background-color .3s;
}

header:hover {
  --opacity: 1;
}
<header>Text</header>

2
  • Мне кажется, лучше это делать добавлением некоего класса. Так как логично что при наведении данное меню должно становиться непрозрачным. И если судить по предоставленному примеру, то ТС скорее всего подразумевал именно чтоб при пролистывании фон появлялся - а когда возвращается на место - фон становился бы прозрачным. Commented 21 авг. 2017 в 15:57
  • Представленный мной способ очень расширяемый, например, можно сделать постепенное увеличение прозрачности в зависимости от количества пролистанных пикселей - с добавлением класса такого не выйдет (хотя и не факт, что такое понадобится). А при наведении убирать прозрачность - это проще простого. Commented 21 авг. 2017 в 17:01

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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