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

Question

[Norum]

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

Comments

[Ankhena]

Как сделать инверсию цвета текста фиксированного меню, когда оно проходит над темным блоком?

[Norum]

не работает. Повесил класс на wrapper для бургера, в итоге бургер стал бирюзовым и на белом фоне его не видно.
Можете проверить на маленькой разрешении norum1991.beget.tech
сам код https://jsfiddle.net/37fs2v6o/1/

<div class="menu-btn">
						<div class="hamburger_wrapper">
							<div class="hamburger hamburger--spin">
							  <div class="hamburger-box">
							    <div class="hamburger-inner"></div>
							  </div>
							</div>
						</div>
					</div>

.hamburger_wrapper {
  display: none;
}
.hamburger-inner,
.hamburger-inner:after,
.hamburger-inner:before {
  background-color: #fff !important;
}

@media (max-width: 991px) {
     .hamburger_wrapper {
    display: block;
    position: fixed;
    top: 28px;
    right: 46px;
    z-index: 100;
    mix-blend-mode: difference;
  }
}

Answer 1

[Арсений Матыцин]

Если нужно сделать это управляемо, собери коллекцию DOM-узлов, где должен быть определенный цвет, слушай прокрутку и ресайз и при пересечении перекрашивай, как надо. Если это SPA, то не забывай чистить стек.