用户手动滚动时突出显示锚点链接？

我为这篇长篇大论道歉.我想包括一些可能有用的东西.

我有一个单页网站,由几个垂直堆叠的div组成.我正在使用浮动导航栏和softscroll.js来使锚点链接在单击时移动到div.

我是一名前端设计师,但是通过这个网站以及数小时的试用/错误和谷歌搜索,我已经能够使所有元素都有效.(窗口调整大小时自动调整div高度,突出显示单击的锚点链接,滚动等)

我已将其设置为单击一个锚点链接将其类更改为"活动".这非常有效.但是,如果用户手动滚动到div,我想触发相同的事情.

我看过这篇文章中使用的代码,因为我已经看过几次了.但它取代了我已经开始工作的一些代码,但仍然没有突出显示.

这是我用于活动锚点的代码:

// JS for highlight selected button
$(function() {
    $("a").click(function() {
      // remove classes from all
      $("a").removeClass("active");
      // add class to the one we clicked
      $(this).addClass("active");
   });
});

我正在使用这个根据窗口大小调整div的大小.不确定它是否相关,但在这里:

// JS for Div Height Auto Resize 
$(document).ready(function(){
  resizeDiv();
});

window.onresize = function(event) {
  resizeDiv();
}

function resizeDiv() {
  vpw = $(window).width();
  vph = $(window).height();
  $('.layoutblock').css({'height': vph + 'px'});
}

这是HTML菜单:

Composition
 Creative
[...]

...和菜单CSS:

  #navigation {
    background-color: #F60;
    position: fixed;
    height: 100%;
    width: 60px;
     -moz-transition:width .5s;
    -webkit-transition:width .5s;
    -o-transition:width .5s;
    transition:width .5s;
    overflow: hidden;
    left: 0px;
    top: 0px;
    z-index: 99;
    padding-top: 30px;
    margin-left: 0px;
}

#navigation:hover {
    margin-left: 0px;
    width: 190px;
}

#navigation li {
    list-style: none;
    margin-left: -40px;

}

#navigation img {
    padding-left: 5px;
    padding-right: 20px;
}
#navigation li a {
    font-family: "Proxima N W01 Smbd", Arial, Helvetica;
    font-size: 14px;
    display: block;
    color: white;
    font-weight:bold;
    text-decoration: none;
    text-transform:uppercase;
    line-height:26px;
    padding-left:5px;
    padding-right: 5px;
    padding-top: 10px;
    height: 50px;
    white-space: nowrap;
}

a.active{
    background-color: #333;
}

最后,这是测试页面的URL:[为安全起见,现在该网站已启动]