Entonces, en mi sitio web personal, arreglé esta barra lateral mientras me desplazaba por toda la página, contiene íconos de Fontawesome y tiene enlaces incrustados. Quiero cambiar el color de estos 4 íconos del color predeterminado de blanco que usa una clase de imp__link--anchor al ingresar a una sección con fondo blanco a un color que he especificado usando class dark-theme en CSS. Intenté usar IntersectionObeserver en JavaScript pero solo funciona en el primer ícono y mi objetivo es repetir el mismo proceso en los 4 íconos ya que no puedo usar querySelectorAll.

Tengo 2 secciones con fondo blanco, así que quiero que cambien los colores de ambas secciones, ya que solo cambio en la primera sección.

Aquí está el HTML para la lista de iconos.

 <ul class="imp__link--list"> <li class="imp__link--wrapper"> <a href="https://www.linkedin.com/in/hatem-soliman-097872187/" target="_blank"> <i class="fab fa-linkedin-in imp__link--anchor"></i> </a> </li> <li class="imp__link--wrapper"> <a href="https://github.com/CodeNKoffee" target="_blank"> <i class="fab fa-github imp__link--anchor"></i> </a> </li> <li class="imp__link--wrapper"> <a href="https://www.behance.net/hatemsolifuse" target="_blank"> <i class="fab fa-behance imp__link--anchor"></i> </a> </li> <li class="imp__link--wrapper"> <a href="" target="_blank"> <i class="fas fa-file-pdf imp__link--anchor"></i> </a> </li> </ul>

Aquí está la parte CSS de los íconos.

 .dark-theme { color: var(--celestial-black); border: 2px solid #1d1d1d; border-radius: 50%; padding: 8px; transition: all 300ms ease; } .imp__link--anchor { border: 2px solid #fff; border-radius: 50%; padding: 8px; transition: all 300ms ease; }

Aquí está la parte de JavaScript

 const link = document.querySelector('.imp__link--anchor'); const sections = document.querySelector('.white-sections'); const linkObserverCallback = (watchEntry, linkObserver) => { if(!watchEntry[0].isIntersecting) { link.classList.remove('dark-theme'); link.classList.add('imp__link--anchor') } else { link.classList.remove('imp__link--anchor'); link.classList.add('dark-theme'); } } const linkObserverOptions = { rootMargin: '-110px', threshold: 0 } const linkObserver = new IntersectionObserver(linkObserverCallback, linkObserverOptions); linkObserver.observe(sections);