Make Header/Navigation change colour when on different section of the website
<p>I am working on a website redesign for my personal portfolio website. I had a cool feature in mind where my header/navigation bar would change colour depending on what section of the webpage it is on (The website is one page only).</p>

<p>The only way i could think of doing this is adding onclick events to the links that go to the different sections of the page, however this would not allow me to change the colour of the header/navigation bar for when the user scrolls manually to a new section.</p>

<p>I was wondering if someone could point me in the right direction as I'm not sure where to start.</p>

<p>Here is the website as it stands now if people want to view it:</p>

<p><a href="http://www.kylebinger.com" rel="nofollow">www.kylebinger.com</a></p>

<p>Here is my HTML markup regarding the header</p>

<pre><code>&lt;header&gt;
    &lt;div class="container"&gt;
        &lt;nav&gt;
            &lt;a href="#home"&gt;Welcome&lt;/a&gt;
            &lt;a href="#featuredWork"&gt;Work&lt;/a&gt;
            &lt;a href="#caseStudy"&gt;Case Study&lt;/a&gt;
            &lt;a href="#about"&gt;About&lt;/a&gt;
            &lt;a href="#contact"&gt;Contact&lt;/a&gt;
        &lt;/nav&gt;
    &lt;/div&gt;
&lt;/header&gt;
</code></pre>

<p>Thanks in advance for any help.</p>