How to make side ID navigation links active/hover state as I scroll down to their div

Question

I'm working on a little a set of jump links which are fixed to the side of my page they link to the main IDs through out the page. I wanted to know how I could make the jump links appear in their active or hover state as the user scrolls down into that ID or use the jump link to go to that ID. I'm assuming I need to use Jquery for this but not entirely sure.

My site is http://stormable.com/heroes/naziba/ . The effect that I am going for is similar to the jump links on the verge http://www.theverge.com/2013/11/15/5106888/sony-playstation-4-review

The HTML I'm using is

<div id="jump-list-wrap">
    <div id="jump-list">
        <ul>
            <li><a href="#stats">Stats</a></li>
            <li><a href="#abilities">Abilities</a></li>
            <li><a href="#talents">Talents</a></li>
            <li><a href="#guides">Guides</a></li>
            <li><a href="#skins">Skins</a></li>
        </ul>
    </div>
</div>

The CSS is

#jump-list-wrap{
position: absolute;
right: 65px;
top: 50px;
}

#jump-list{
position: absolute;
top: 0;
background-color: #353535;
border: solid 1px #151515;
display: block;
}

#jump-list.fixed {
 position: fixed;
 top: 100px;
 }

 #jump-list li a{
display: block;
border-bottom: solid 1px #121212;
padding: 5px 20px;
color: #f2f2f2;
text-decoration: none;
 }

 #jump-list li a:hover{
 background-color: #3380c8;
 }

Thanks

Answer 1

Looks like the JQuery .scroll() method. http://api.jquery.com/scroll/

Answer 2

You can try Bootstrap's Scrollspy plugin. It does exactly what you are describing: h ttp://getbootstrap.com/javascript/#scrollspy

Answer 3

See this jsFiddle

The jquery detects any page scrolling on the document.

$(document).scroll(function() {

It then looks to see if the scroll position on the page is within a certain div, and changes a sidebar value accordingly.

if(scroll_top > div_one_top && scroll_top < div_two_top) {
    //You are now past div one
    $('#sidebar').text('One');
} else if( scroll_top > div_two_top) {
    //You are now past div two
    $('#sidebar').text('Two');
}

Hopefully this will get you started. Good luck!