title: How to make sticky header change link colour on scroll?
body: <p>Looking for a way to change link colour in JavaScript within a specific ID on scroll.</p>
  <p>That's my CSS.</p>
  <pre><code>  #header_nav {
    transition: 0.4s;
      position: fixed;
      top: 0;
      height: 130px;
    }
    
    #main-logo {
      transition: 0.4s;
      height: 52px;
      width: 169.92px;
    }
    
    #main-nav a{
     color: #f3f5f6;
      transition: 0.4s;
    }
  </code></pre>
  <p>And here is the JavaScript</p>
  <pre><code>function scrollFunction() {
    if (document.body.scrollTop &gt; 0 || document.documentElement.scrollTop &gt; 0) {
     
      document.getElementById(&quot;header_nav&quot;).style.height = &quot;70px&quot;;
      document.getElementById(&quot;main-logo&quot;).style.width = &quot;118.944px&quot;;
      document.getElementById(&quot;main-logo&quot;).style.height = &quot;36.4px&quot;;
      document.getElementById(&quot;main-logo&quot;).style.filter = &quot;invert(0)&quot;;
      document.getElementById(&quot;header_nav&quot;).style.backgroundColor = &quot;#F1F1F3&quot;;
      document.getElementById(&quot;logo&quot;).style.fontSize = &quot;25px&quot;;
      document.getElementById(&quot;main-nav a&quot;).style.color = &quot;#223732&quot;;
     
      
    } else {
      document.getElementById(&quot;header_nav&quot;).style.height = &quot;130px&quot;;
      document.getElementById(&quot;header_nav&quot;).style.backgroundColor = &quot;transparent&quot;;
      document.getElementById(&quot;main-logo&quot;).style.filter = &quot;invert(1)&quot;;
      document.getElementById(&quot;main-logo&quot;).style.width = &quot;169.92px&quot;;
      document.getElementById(&quot;main-logo&quot;).style.height = &quot;52px&quot;;
      document.getElementById(&quot;logo&quot;).style.fontSize = &quot;35px&quot;;
      document.querySelectorAll(&quot;.main-nav a&quot;).style.color = &quot;#f3f5f6&quot;;
    }
  }
  </code></pre>
  <p>You can see where I have the code that doesn't work:</p>
  <pre><code>document.getElementById(&quot;main-nav a&quot;).style.color = &quot;#223732&quot;;
  </code></pre>
  <p>Is there a way I can select just the link in javascript D from that id as I have it in CSS?</p>