javascript - Change Active Menu Item on Page Scroll? -

i want activate menu item when it's corresponding section. got inspired previous question: change active menu item on page scroll? .

but difference in menu have little image on each menu item, shows if hover menu item, , hides when don't.

html

<nav>         <ul id="pics">           <a href="#def"><li id="text-what"><img src="images/what.png" id="pic-what" class="vishid"><p>item1</p></li></a>           <a href="#program"><li id="text-training"><img src="images/training.png" id="pic-training" class="vishid"><p>item2</p></li></a>           <a href="#testi"><li id="text-testi"><img src="images/trait.png" id="pic-testi" class="vishid"><p>item3</p></li></a>           <a href="#contact"><li id="text-contact"><img src="images/contact.gif" id="pic-contact" class="vishid"><p>item4</p></li></a>         </ul>     </nav> 

css

.vishid{     visibility: hidden; }  .visvis{     visibility:visible; } 

javascript (to show , hide images when hovering items)

$(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'); }); }); 

i want show image when @ it's corresponding section. how can javascript?

there lot going on here. html should technically corrected. href's should not encapsulte li's. instead href should set block - width , height 100% - within li. let's move class of .vishid parent li. way if want effect else - besides images - in future, easy add. like:

<nav>     <ul id="pics">         <li id="text-what" class="vishid"><a href="#def"><img src="images/what.png" id="pic-what"><p>item1</p><</a>/li>         <li id="text-training" class="vishid"><a href="#program"><img src="images/training.png" id="pic-training"><p>item2</p></a></li>         <li id="text-testi" class="vishid"><a href="#testi"><img src="images/trait.png" id="pic-testi"><p>item3</p></a></li>         <li id="text-contact" class="vishid"><a href="#contact"><img src="images/contact.gif" id="pic-contact"><p>item4</p></a></li><     </ul> </nav> 

then need adjust css correct "non-block" level href.

#pics li {     display: block;     width: 100%;     height: 100%; }  .vishid img {     visibility: hidden; }  .visvis img {     visibility: visible; } 

finally, going assume using "articles" in html sections. doesn't have be, example assume.

var clickscroll = false,     triggerhighlight = 80; // distance top trigger action  $(window).scroll(function () {      var y = $(this).scrolltop(),         ycatch = y + triggerhighlight;      // let's wrap in variable check. set tru clicking on navigation     // false if scrolling     if (!clickscroll) {         $('article').each(function (i) {             var whicharticle = $(this).attr('id');              if ($(this).position().top < ycatch) {                 var currentarticle = "#" + whicharticle;                 adjustsubnav(currentarticle);             }         });     }  });  function adjustsubnav(l) {     $('#pics a').each(function (i) {         if ($(this).attr('href') == l) {    // add active class corresponding menu item             $(this).parent('li').removeclass('vishid').addclass('visvis');         } else {             $(this).parent('li').removeclass('visvis').addclass('vishid');         }     }); }