Skrollr - change nav class when scrolling to different sections of site

I am making a site using Skrollr.

Most of it is complete except I want to add a side navigation so that these nav dots change color as the user progresses through the site (similar to http://www.beautyofbrewing.com/).

So a code snippet of what I have been naively trying is:

<div id="nav">
        <ul>
            <li class="home"><a data-menu-top="0" href="#one">Home</a></li>
            <li class="wakeup"><a data-menu-top="3100" href="#wakeup">Wake up</a></li>
            <li class="plan"><a data-menu-top="9000" href="#plan">Plan your day</a></li>
            <li class="health"><a data-menu-top="9000" href="#health">Health</a></li>
        </ul>
</div>

    <div id="one" data-top="$('home').addClass('active');" >
        <div class="logo" data-anchor-target="#one" 
            data-top="transform: scale(1) translateY(80px);" 
            data--200-top="transform: scale(1) translateY(80px);" 
            data--1000-top="transform[bounce]: scale(1) translateY(10px);" 
            data--1500-top="transform[bounce]: scale(0.5) translateY(10px);">
            <img src="images/logo.png">
        </div>
</div>

Of course, this doesn't work, but you get the idea of what I am trying to achieve.

Does anyone know how I might be able to addClass so that my nav dots change class when the div they relate to is scrolled to. Then I guess I want to remove the 'active' class once the div is scrolled out of view.

Thank you for any help.

Solution

<li class="home" data-center-top="@class:home active" data-center-bottom="@class:home active" data-anchor-target="#one" data-edge-strategy="reset">
    <a data-menu-top="0" href="#one">Home</a>
</li>