title: Image highlight (hover state) on active section while scrolling?
body: <p>I have these icons above each section on my page (the largish circular icons, please see example: <a href="http://pftest.fhero.net" rel="nofollow">http://pftest.fhero.net</a>) with colored hover states... what I would really love to do is have them change to the active hover states as the user scrolls to each section (preferably with a simple fade transition) - much like the effect of highlighting the active links/section in the navigation.</p>
  
  <p>There are many tutorials, plugins and questions on this site and so forth for highlighting active sections in a navigation however, but doesn't seem to be much that I can find relating to applying the effect to another div or image on the page...</p>
  
  <p>I'm definitely not any kind of jQuery expert but I'm wondering if one of the myriad of scripts/plugins available which  are typically used for highlighting active states in navigation could simply be adapted to this scenario somehow to achieve the same effect? Perhaps even the one I am currently using on my page?</p>
  
  <p>Here is the script I'm using for highlighting the active section in the navigation on my page: </p>
  
  <pre><code>/* 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 any li when an anchor is clicked */
  
  main.children().removeClass();
  
  /* Add active class to clicked anchor's parent li */
  
  $(this).parent().addClass('active');
  
  });
  
  $(window).scroll(function(event) {
     if($("#work-section").offset().top &lt; $(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 &lt; $(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 &lt; $(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 &lt; $(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 &lt; $(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');              
  }       
  });
  </code></pre>
  
  <p>and the HTML:</p>
  
  <pre><code>    &lt;nav id="mainmenu" name="mainmenu"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a class="scroll" id="work-section1" href="#work-section"&gt;Works&lt;/a&gt;&lt;/li&gt;           
          &lt;li&gt;&lt;a class="scroll" id="about-section1" href="#about-section"&gt;About&lt;/a&gt;&lt;/li&gt;            
          &lt;li&gt;&lt;a class="scroll" id="services-section1" href="#services-section"&gt;Services&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="scroll" id="process-section1" href="#process-section"&gt;Process&lt;/a&gt;&lt;/li&gt;                
          &lt;li&gt;&lt;a class="scroll" id="footer-section1" href="#footer-section"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;                
      &lt;/nav&gt; 
  
  &lt;section id="about-section" data-anchor-offset="90"&gt; 
  &lt;section id="work-section" data-anchor-offset="90"&gt; 
  ...ect...
  </code></pre>
  
  <p>Could this somehow be adapted to accomplish the effect I am looking for? Or any other/better methods, or plugins I should be looking at?</p>
  
  <p>I should add that the icons use the sprites method which could make the CSS side of things a little trickier, although I would be willing to change them to non-sprite images if necessary...</p>