Как у текста внутри блока с position:fixed менять цвет при прохождении блока с background-color:#040404 (это черный) на белый?

Question

Не получается использовать mix-blend-mode: difference;. Пытался много раз, но ничего не вышло

Ниже JSX и SCSS самого блока.

.menu {
  color: $Black-color;
  top: 60px;
  position: fixed;
}

.navigate ul {
  margin-bottom: 40px;
}

.logoContainer {
  margin-bottom: 29px;
}

.chapter {
  font-size: 24px;
  .chapterLink {
    color: #040404;
  }
}

.chapter:not(:last-child) {
  margin-bottom: 20px;
}

.consultation {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.5px;
  width: 188px;
  max-height: 78px;
  display: flex;
  padding: 20px;
  align-items: center;
  border-radius: 12px;
  border: 2px solid $Black-color;
  text-align: start;
}

<div className={styles.menu}>
  <nav className={styles.navigate}>
    <ul>
      <li className={styles.chapter}>
        <Link className={styles.chapterLink} href={ '#'}> Текст, который должен менять цвет...
        </Link>
      </li>
    </ul>
  </nav>
</div>

Блок, при прохождении которого должен меняться цвет:

.contentBlack {
  background-color: $Black-color;
  max-width: 1700px;
  padding: 0 10px;
  margin: 0 auto;

  @media screen and (max-width: $Mobile) {
    max-width: 446px;
    padding: 0 16px;
  }
}

Answer 1

Для изменения цвета текста внутри блока с position:fixed при прохождении черного блока на белый, можно использовать JavaScript.

при прокрутке страницы, скрипт отслеживает положение скролла и сравнивает его с положением блока с черным фоном. Если скролл находится в пределах этого блока, цвет текста в блоке с id="fixedBlock" изменяется на белый, в противном случае - на черный:

var fixedBlock = document.getElementById('fixedBlock');
var blackBlock = document.getElementById('blackBlock');

window.onscroll = function() {
  var scrollPosition = window.scrollY;

  if (scrollPosition >= blackBlock.offsetTop && scrollPosition <= (blackBlock.offsetTop + blackBlock.offsetHeight)) {
    fixedBlock.style.color = 'white';
  } else {
    fixedBlock.style.color = 'black';
  }
};

БЛОГ НА HUSL

Как у текста внутри блока с position:fixed менять цвет при прохождении блока с background-color:#040404 (это черный) на белый?

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