@jesus-iscariot

Как сделать, чтобы при скролле до определённого блока менялся стиль у шапки?

Нужно, чтобы когда пользователь проскроллил ниже верха страницы, шапка становилась полупрозрачной. Подскажите, пожалуйста, как это можно сделать (потому что видел подобное на многих сайтах)
  • Вопрос задан
  • 986 просмотров
Решения вопроса 1
Eugevin
@Eugevin
20 лет, frontend как смысл жизни
Обычно для решения этой задачки вешают event на scroll по отношению к window. А потом с помощью getBoundingClientRect узнают расстояние нужного блока относительно viewport и считают.

Если нужно сделать "когда пользователь проскроллил ниже верха страницы", то все еще проще:

const header = document.querySelector('.test') // вместо test класс твоего хэдера

window.addEventListener('scroll', () => {
  if (pageYOffset > 0) {
    header.classList.add('header_active') // твой класс для прозрачности, но можно и header.style.opacity = 0.5;
  } else {
    header.classList.remove('header_active')
  }
})
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
02 апр. 2020, в 16:49
15000 руб./за проект
02 апр. 2020, в 16:41
2000 руб./за проект
02 апр. 2020, в 16:33
10000 руб./за проект