title: Change Active Menu Item on Page Scroll?
body: <p>I want to activate the menu item when I get to it's corresponding section. I got inspired by this previous SO question: <a href="https://stackoverflow.com/questions/9979827/change-active-menu-item-on-page-scroll">Change Active Menu Item on Page Scroll?</a> .</p>
  
  <p>but the difference is that in my menu I have a little image over each menu item, that shows only if I hover the menu item, and hides when don't. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;nav&gt;
          &lt;ul id="pics"&gt;
            &lt;a href="#def"&gt;&lt;li id="text-what"&gt;&lt;img src="images/what.png" id="pic-what" class="vishid"&gt;&lt;p&gt;item1&lt;/p&gt;&lt;/li&gt;&lt;/a&gt;
            &lt;a href="#program"&gt;&lt;li id="text-training"&gt;&lt;img src="images/training.png" id="pic-training" class="vishid"&gt;&lt;p&gt;item2&lt;/p&gt;&lt;/li&gt;&lt;/a&gt;
            &lt;a href="#testi"&gt;&lt;li id="text-testi"&gt;&lt;img src="images/trait.png" id="pic-testi" class="vishid"&gt;&lt;p&gt;item3&lt;/p&gt;&lt;/li&gt;&lt;/a&gt;
            &lt;a href="#contact"&gt;&lt;li id="text-contact"&gt;&lt;img src="images/contact.gif" id="pic-contact" class="vishid"&gt;&lt;p&gt;item4&lt;/p&gt;&lt;/li&gt;&lt;/a&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.vishid{
      visibility: hidden;
  }
  
  .visvis{
      visibility:visible;
  }
  </code></pre>
  
  <p>JAVASCRIPT (to show and hide images when hovering items)</p>
  
  <pre><code>$(document).ready(function(){
  $("#text-what").hover(function(){
      $("#pic-what").addClass('visvis');
  },function(){
      $("#pic-what").removeClass('visvis');
  });
  
  $("#text-training").hover(function(){
      $("#pic-training").addClass('visvis');
  },function(){
      $("#pic-training").removeClass('visvis');
  });
  
  $("#text-testi").hover(function(){
      $("#pic-testi").addClass('visvis');
  },function(){
      $("#pic-testi").removeClass('visvis');
  });
  
  $("#text-contact").hover(function(){
      $("#pic-contact").addClass('visvis');
  },function(){
      $("#pic-contact").removeClass('visvis');
  });
  });
  </code></pre>
  
  <p>I want to show the image when I am at it's corresponding section. How can I do that with javascript?</p>