滚动时活动部分的图像高亮显示(悬停状态)

我在我的页面上的每个部分上面都有这些图标(较大的圆形图标，请参见示例:http://pftest.fhero.net)，带有彩色悬停状态…我真正想做的是让它们在用户滚动到每个部分时变为活动悬浮状态(最好使用简单的渐变过渡)-很像在导航中突出显示活动链接/部分的效果。

这个网站上有很多教程，插件和问题等等，用于突出显示导航中的活动部分，但是似乎没有太多，我可以找到有关将效果应用到页面上的另一个div或图像…

我绝对不是任何类型的jQuery专家，但我想知道，如果无数可用的脚本/插件，通常用于突出显示活动状态的导航可以简单地适应这种情况，以达到相同的效果?也许甚至是我目前在我的页面上使用的那个?

下面是我用来在我的页面导航中突出显示活动部分的脚本:

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

和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...

这能以某种方式适应完成我正在寻找的效果吗?或任何其他/更好的方法，或插件我应该看?

我应该补充说，图标使用sprites方法，这可能会使CSS方面的事情有点棘手，尽管我愿意在必要时将它们更改为非sprite图像…