title: Looping over every link in a Navigation Bar using IntersectionObeserver
body: <p>So on my personal website, I had this sidebar fixed while scrolling through the entire page, it contains Fontawesome icons and has embedded links. I want to change the color of these 4 icons from the default color of white that use a class of <strong>imp__link--anchor</strong> when entering a section with white background to a color I have specified using class <strong>dark-theme</strong> in CSS. I tried using IntersectionObeserver in JavaScript but it only works on the first icon and my aim is to loop the same process over the 4 icons since I can't use querySelectorAll.</p>
  <p>I have 2 white-background sections so I want them to change colors for both sections as I have it only changing on the first section.</p>
  <p><strong>Here's the HTML for the icon list</strong></p>
  <pre><code>&lt;ul class=&quot;imp__link--list&quot;&gt;
      &lt;li class=&quot;imp__link--wrapper&quot;&gt;
        &lt;a href=&quot;https://www.linkedin.com/in/hatem-soliman-097872187/&quot; target=&quot;_blank&quot;&gt;
          &lt;i class=&quot;fab fa-linkedin-in imp__link--anchor&quot;&gt;&lt;/i&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=&quot;imp__link--wrapper&quot;&gt;
        &lt;a href=&quot;https://github.com/CodeNKoffee&quot; target=&quot;_blank&quot;&gt;
          &lt;i class=&quot;fab fa-github imp__link--anchor&quot;&gt;&lt;/i&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=&quot;imp__link--wrapper&quot;&gt;
        &lt;a href=&quot;https://www.behance.net/hatemsolifuse&quot; target=&quot;_blank&quot;&gt;
          &lt;i class=&quot;fab fa-behance imp__link--anchor&quot;&gt;&lt;/i&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li class=&quot;imp__link--wrapper&quot;&gt;
        &lt;a href=&quot;&quot; target=&quot;_blank&quot;&gt;
          &lt;i class=&quot;fas fa-file-pdf imp__link--anchor&quot;&gt;&lt;/i&gt;
        &lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  <p><strong>Here's the CSS part for the icons</strong></p>
  <pre><code>.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;
   }
  </code></pre>
  <p><strong>Here's the JavaScript part</strong></p>
  <pre><code>const link = document.querySelector('.imp__link--anchor');
  const sections = document.querySelector('.white-sections');
  
  const linkObserverCallback = (watchEntry, linkObserver) =&gt; {
    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);
  </code></pre>