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

Question

[jesus-iscariot]

Нужно, чтобы когда пользователь проскроллил ниже верха страницы, шапка становилась полупрозрачной. Подскажите, как это можно сделать (потому что видел подобное на многих сайтах).

Comments

[Rerurk]

На событие повесить атрибут opacity, не работает?

Answer 1

[Евгений Винокуров]

Обычно для решения этой задачки вешают 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')
  }
})

Comments

[jesus-iscariot]

Совсем глупый вопрос: что подставить вместо queryselector?

[Евгений Винокуров]

jesus-iscariot, document.querySelector('тут в этих скобках выбираешь класс твоей шапки'). Вообще лучше сразу подучить JavaScript - потратишь не больше недели для того, чтобы базово манипулировать с Версткой и делать такие простые вещи. Сам не заметишь, как станешь понимать то, что раньше казалось очень сложным)

[jesus-iscariot]

Евгений Винокуров, Спасибо вам огромное, решение сработало!