Tengo una barra de navegación en la parte superior de mi página que permanece en la parte superior de la página en todo momento;

 <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>

En la sección del cuerpo tengo secciones con etiquetas de identificación, a las que se desplazan los enlaces de la barra de navegación.

 <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 */

¿Cómo puedo, con javascript o jquery, cambiar el color de fondo de las 'li VR Solutions' a rojo si dicha sección está visible en la página, y luego volver al color anterior una vez fuera de la pantalla, y pasar a los 'li Clients' una vez? se ve en pantalla?

La idea es un indicador de dónde se encuentra en la página que muestra la barra de navegación.