How can I change the background colour of an list item when on a certain section of a page?

Question

I have a navbar on the top of my page that stays on top of the page at all times;

<div>
<header>
    <nav class='cf'>
        <ul class='cf'>
            <li>
                <a href='#showcase'>Home</a>
            </li>
            <li>
                <a href='#vr-solutions'>VR Solutions</a>
            </li>
            <li>
                <a href='#clients'>Clients</a>
            </li>
            <li>
                <a href="#manufacturing">Manufacturing</a>
            </li>
            <li>
               <a href="#products">Products</a>
            </li>
            <li>
                <a href="#about-us">About Us</a>
            </li>
            <li>
                <a href="#/">Latest News</a>
            </li>
            <li>
                <a href="#/">Gallery</a>
            </li>
        </ul>
            <a href='#' id='openup'>Dropdown</a>
    </nav>
</header>   
</div>

In the body section I have sections with id tags, to which the navbar links scroll to.

<section class="section section-dark" id="vr-solutions">
    <p> content </p>
</section>

<section class="section section-light" id="clients">
    <p> content </p>
</section>

/* and so on */

How do I, with javascript or jquery, change the background colour of the 'li VR Solutions' to red if said section is visible on page, and then back to the previous colour once off screen, and move to the 'li Clients' once it is visible on screen?

The idea is an indicator of where you are on page shown by the navbar.