Изменение цвета при скролле к определенному блоку

Question

В мобильной версии есть фиксированная иконка звонка, она оранжевого цвета, и на сайте есть секции оранжевого цвета, нужно чтоб когда иконка при скролле достигала этих секций меняла цвет, например на белый. Как это реализовать?

Пример https://job.kolesa.kz/ но тут изменения происходят с шапкой сайта

Answer 1

Например что-то такое

 const icon = document.querySelector('.icon');
// Элемент иконки
const text = document.querySelector('.text');
// Блок или секция

// Обработчик при скролле
document.addEventListener('scroll', () => {
// Высота блока или секции
  let stepColor = text.getBoundingClientRect().height;
// Положение на экране 
  let scrollY = window.scrollY;

  if (scrollY > stepColor) {
    icon.style.backgroundColor = 'red'
  }
  if (scrollY > stepColor * 2) {
    icon.style.backgroundColor = 'green';
  }
  if (scrollY < stepColor) {
    icon.style.backgroundColor = 'black'
  }

})

БЛОГ НА HUSL

Изменение цвета при скролле к определенному блоку

Ответы (1 шт):