javascript - Image highlight (hover state) on active section while scrolling? -

i have these icons above each section on page (the largish circular icons, please see example: http://pftest.fhero.net) colored hover states... love have them change active hover states user scrolls each section (preferably simple fade transition) - effect of highlighting active links/section in navigation.

there many tutorials, plugins , questions on site , forth highlighting active sections in navigation however, doesn't seem can find relating applying effect div or image on page...

i'm not kind of jquery expert i'm wondering if 1 of myriad of scripts/plugins available typically used highlighting active states in navigation adapted scenario somehow achieve same effect? perhaps 1 using on page?

here script i'm using highlighting active section in navigation on page:

/* scroll navigation highlight */  $("#work-section1").parent().addclass('active'); var main = main = $('#mainmenu ul');  $('.scroll').click(function(event) {  event.preventdefault();  var full_url = this.href,     parts = full_url.split('#'),     trgt = parts[1],     target_offset = $('#'+trgt).offset(),     target_top = target_offset.top;  $('html, body').animate({scrolltop:target_top}, 500);  /* remove active class on li when anchor clicked */  main.children().removeclass();  /* add active class clicked anchor's parent li */  $(this).parent().addclass('active');  });  $(window).scroll(function(event) {    if($("#work-section").offset().top < $(window).scrolltop() + $(window).outerheight()){     $("#work-section1").parent().addclass('active');      $("#about-section1").parent().removeclass('active');      $("#footer-section").parent().removeclass('active');      $("#services-section1").parent().removeclass('active');      $("#process-section1").parent().removeclass('active');       }    if($("#about-section").offset().top < $(window).scrolltop() + $(window).outerheight()) {     $("#about-section1").parent().addclass('active');      $("#work-section1").parent().removeclass('active');      $("#footer-section1").parent().removeclass('active');       $("#services-section1").parent().removeclass('active');      $("#process-section1").parent().removeclass('active');                 }     if($("#services-section").offset().top < $(window).scrolltop() + $(window).outerheight()){     $("#services-section1").parent().addclass('active');      $("#about-section1").parent().removeclass('active');      $("#work-section1").parent().removeclass('active');     $("#footer-section1").parent().removeclass('active');     $("#process-section1").parent().removeclass('active');        }    if($("#process-section").offset().top < $(window).scrolltop() + $(window).outerheight()){     $("#process-section1").parent().addclass('active');      $("#about-section1").parent().removeclass('active');      $("#work-section1").parent().removeclass('active');     $("#footer-section1").parent().removeclass('active');      $("#services-section1").parent().removeclass('active');           }     if($("#footer-section").offset().top < $(window).scrolltop() + $(window).outerheight()){     $("#footer-section1").parent().addclass('active');      $("#about-section1").parent().removeclass('active');      $("#work-section1").parent().removeclass('active');      $("#services-section1").parent().removeclass('active');      $("#process-section1").parent().removeclass('active');               }        }); 

and html:

    <nav id="mainmenu" name="mainmenu">     <ul>         <li><a class="scroll" id="work-section1" href="#work-section">works</a></li>                    <li><a class="scroll" id="about-section1" href="#about-section">about</a></li>                     <li><a class="scroll" id="services-section1" href="#services-section">services</a></li>         <li><a class="scroll" id="process-section1" href="#process-section">process</a></li>                         <li><a class="scroll" id="footer-section1" href="#footer-section">contact</a></li>     </ul>                     </nav>   <section id="about-section" data-anchor-offset="90">  <section id="work-section" data-anchor-offset="90">  ...ect... 

could somehow adapted accomplish effect looking for? or other/better methods, or plugins should looking at?

i should add icons use sprites method make css side of things little trickier, although willing change them non-sprite images if necessary...

you use small little function this, checks if element on screen. set little jsfiddle you: http://jsfiddle.net/lhrkb/1/

code:

function iselementvisible(elementtobechecked) {     var topview = $(window).scrolltop();     var botview = topview + $(window).height();     var topelement = $(elementtobechecked).offset().top;     var botelement = topelement + $(elementtobechecked).height();     return ((botelement <= botview) && (topelement >= topview)); }  $(window).scroll(function () {        isonview = iselementvisible(".inview");        if(isonview){           //what when element visible            $(".inview").css({"background":"#ccc"});        }else{ // if not visible         } }); 

ok, have changed jsfiddle bit, uses fadein on invisible element when comes view: http://jsfiddle.net/lhrkb/2/

---

ok, changed jsfiddle once again. when scroll in results pane, , play around bit can see element change class comes on screen , when goes away again. commented js can see , it. http://jsfiddle.net/lhrkb/4/