Scrolling circle bars on the right side?

I am trying to create a scrolling circles that navigates each section of my page like this: http://goo.gl/kAhj8J

However for some reason I don't how to start it with jQuery.

Here's my Markup:

<section class="background-fixed img-1" >
        <div class="main-content">
            <h2>Title here</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
        </div>
    </section>

    <section class="background-fixed img-2">
        <div class="main-content">
            <h2>Title here</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
        </div>
    </section>

    <section class="background-fixed img-3">
        <div class="main-content">
            <h2>Title here</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
        </div>
    </section>

    <section class="background-fixed img-4">
        <div class="main-content">
            <h2>Title here</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
        </div>

Here's the JSFIDDLE: http://ift.tt/1BLiQRn

Any ideas?