title: How to make side ID navigation links active/hover state as I scroll down to their div
body: <p>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. </p>
  
  <p>My site is <a href="http://stormable.com/heroes/naziba/" rel="nofollow">http://stormable.com/heroes/naziba/</a>. 
  The effect that I am going for is similar to the jump links on the verge <a href="http://www.theverge.com/2013/11/15/5106888/sony-playstation-4-review" rel="nofollow">http://www.theverge.com/2013/11/15/5106888/sony-playstation-4-review</a></p>
  
  <p>The HTML I'm using is </p>
  
  <pre><code>&lt;div id="jump-list-wrap"&gt;
      &lt;div id="jump-list"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#stats"&gt;Stats&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#abilities"&gt;Abilities&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#talents"&gt;Talents&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#guides"&gt;Guides&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#skins"&gt;Skins&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS is </p>
  
  <pre><code>#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;
   }
  </code></pre>
  
  <p>Thanks</p>