Смена цвета фиксированного блока при попаданий на определённые секции с классом?

Question

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

body {
  margin: 0;
}

section {
  min-height: 700px;
}

.black {
  background: #000;
}

.fix {
  width: 90px;
  height: 90px;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
}

<div class="fix"></div>
<section></section>
<section class="black"></section>
<section></section>
<section class="black"></section>
<section class="black"></section>
<section></section>
<section class="black"></section>

Answer 1

Первый вариант через CSS фильтр:

body {
  margin: 0;
}

section {
  min-height: 700px;
}

.black {
  background: #000;
}

.fix {
  width: 90px;
  height: 90px;
  position: fixed;
  top: 0;
  left: 0;
  background: transparent;
  backdrop-filter: invert(100%);
}

<div class="fix"></div>
<section></section>
<section class="black"></section>
<section></section>
<section class="black"></section>
<section class="black"></section>
<section></section>
<section class="black"></section>

Второй вариант через определение позиций посредством JS:

const fixedDiv = document.querySelector('.fix');
const blackSections = Array.from( document.querySelectorAll('.black') );

window.addEventListener( 'scroll', ()=>{
  let fixedDivRect = fixedDiv.getBoundingClientRect();
  
  let isIntersected = blackSections.some( blackSection => {
    let blackSectionRect = blackSection.getBoundingClientRect();
    
    if(
      fixedDivRect.top > blackSectionRect.top &&
      fixedDivRect.bottom < blackSectionRect.bottom
    ) return true;
  });
  
  fixedDiv.classList.toggle( 'intersected', isIntersected );
});

body {
  margin: 0;
}

section {
  min-height: 700px;
}

.black {
  background: #000;
}

.fix {
  width: 90px;
  height: 90px;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
}

.fix.intersected {
  background-color: #fff;
}

<div class="fix"></div>
<section></section>
<section class="black"></section>
<section></section>
<section class="black"></section>
<section class="black"></section>
<section></section>
<section class="black"></section>

БЛОГ НА HUSL

Смена цвета фиксированного блока при попаданий на определённые секции с классом?

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