Javascript 突出显示页面滚动上的活动菜单项？

我想在滚动页面的当前菜单项中添加一个活动功能。这是一个单独的页面，有不同的部分。单击项目时，活动状态应切换到当前状态

向下滚动页面时，活动菜单项会发生变化。这是怎么做到的？你们能根据我的演示代码给我一个答案吗？谢谢

我的演示：

var menuContainer=$（'header'）.height（）；
函数滚动到Anchor（anchorName）{
var aTag=$（“div[name='“+anchorName+'”]）；
$（'html，body'）。设置动画({
scrollTop:aTag.offset（）.top-菜单容器
}“慢”）；
控制台日志（anchorName）；
}

.fluid{
明确：两者皆有；
左边距：0；
宽度：100%；
浮动：左；
显示：块；
}
/*移动布局：480px及以下*/
身体{
背景色：#EEEEEE；
字体系列：“开放式Sans”，Helvetica，“Heiti TC”，“微软正黑”，“微软雅黑”，“PMingLiU”，无衬线；
字体大小：100%；
边际上限：0px；
}
.gridContainer{
左边距：自动；
右边距：自动；
左侧填充：1.1375%；
右侧填充：1.1375%；
明确：无；
浮动：无；
宽度：自动；
}
#标题{
边际上限：0；
右边距：自动；
左边距：自动；
显示：块；
宽度：100%；
高度：200px；
最大宽度：1000px；
位置：固定；
背景色：#FF6600；
}
/*标题-导航*/
#亚纳夫{
身高：100%；
右边距：自动；
宽度：100%；
背景色：#1BBC9B；
字体大小：120%；
}
#导航菜单{
填充：0；
利润上限：4倍；
右边距：自动；
左边缘：0%；
页边距底部：0；
宽度：650px；
}
#navmenu li{
显示：内联；
浮动：左；
}
#导航菜单{
颜色：#294C52；
显示：内联块；
填充：10px 20px；
文本对齐：居中；
文字装饰：无；
字体大小：粗体；
}
#纳维利{
右边框：1px实心#294C52；
框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
}
#李娜：最后一个孩子{
右边框：1px实心#576979；
/*最后一个列表项上没有边框*/
}
#李娜：第一个孩子{
背景色：#294C52；
颜色：#FFFFFF；
}
#导航菜单a：悬停，
导航a：激活{
背景色：#1BBC9B；
颜色：#FFFFFF；
}
#内容{
宽度：100%；
最大宽度：1000px；
身高：100%；
页边顶部：1px；
}
#第一节{
背景色：#294C52；
宽度：100%；
显示：块；
垫面：5px；
垫底：5px；
边缘顶端：198px；
}
#第2节{
背景色：#EEEEEE；
}
#第三节{
背景色：#EEEEEE；
}
#第四节{
背景色：#EEEEEE；
左边距：0；
宽度：100%；
浮动：左；
}
#关于组织左侧的内容{
宽度：48.1012%；
背景色：#FFFFFF；
浮动：左；
明确：无；
}
#关于组织中心的内容{
宽度：48.1012%；
左缘：1.2658%；
明确：无；
背景色：#FFFFFF；
浮动：对；
}
#关于组织权的内容{
背景色：#FFFFFF；
}
#第五节{
背景色：#EEEEEE；
}
/*内容-排版*/
.目录{
列表样式类型：无；
颜色：#294C52；
文本缩进：-25px；
字体大小：100%；
线高：173%；
}
.内容列表粗体{
字体大小：粗体；
字体大小：110%；
颜色：#294C52；
}
.内容标题{
背景色：#903233；
颜色：#FFFFFF；
垫面：3件；
}
.content-p-white{
颜色：#FFFFFF；
左侧填充：10px；
右边填充：10px；
文本对齐：对齐；
线高：25px；
填充顶部：0px；
垫底：0px；
}
.content-p-black{
颜色：#294C52；
左侧填充：10px；
右边填充：10px；
文本对齐：对齐；
线高：25px；
字体大小：100%；
}
.content-p-black-b{
颜色：#294C52；
字体大小：粗体；
左侧填充：10px；
字体大小：110%；
}

第一节

第二节

第三节

第四节

第五节


《2013》年香港殘疾人士貧窮情況報告》顯示介乎18至64歲適齡工作的殘疾人士的貧窮率為22.4%，遠較相同年齡群的整體貧窮率10.5%為高。再者，按經濟活動身分劃分，近18萬名的殘疾適齡工作人士當中，只有39.1%有從事經濟活動，遠低於整體人口中同年齡層的72.8%
於2013年3.月初，一群熱心人士包括郭鍵勳博士、謝俊謙教授及伍杏修先生等有意建立一個各方協作平台，改善殘疾人士的就業困難。
資訊科技易達協會有限公司 无障碍IT发展协会有限公司（AIDA）於2014年11月正式註冊成立。
第二节
資訊科技易達協會是一個社會企業致力提供專業資訊科技服務，同時為嚴重殘疾人士提供培訓及工作機會，讓學員可選擇在家居從事資訊科技相關工作；協會全力推動無障礙軟件開發，協助社會資訊共融。
第三节
全面利用現代通訊科技的便利，解決殘疾人士面對指定工作地點的限制，讓他們可選擇在家居或院舍工作，同時得到必要的護理。艾达選擇網頁開發作為起步點，由「無障礙學堂」（无障碍学校）及業界專業義工負責培訓學員，讓他們掌握指定技術。
AIDA會承接工作項目，將項目分拆，然後將組件分配給技術程度不同的學員，並會密切督導整個項目的進行。艾达已經與本地多間知名網頁開發公司結為合作伙伴，致力確保艾达的所有服務均符合市場要求。艾达會以殘疾友善機構的工作項目作為開始，當累積一定成功往績後，會推廣至主流市場。
部分
$(document).ready( function (){
var topMenu = $("#navmenu"),
topMenuHeight = topMenu.outerHeight()+15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
  var item = $($(this).attr("href"));
  if (item.length) { return item; }
  });
 });

      $(window).scroll(function(){
   // Get container scroll position
   var fromTop = $(this).scrollTop()+topMenuHeight;

   // Get id of current scroll item
var cur = scrollItems.map(function(){
 if ($(this).offset().top < fromTop)
   return this;
});
 // Get the id of the current element
  cur = cur[cur.length-1];
  var id = cur && cur.length ? cur[0].id : "";
  // Set/remove active class
  menuItems.parent().removeClass("active")
 .end().filter("[href=#"+id+"]").parent().addClass("active");
});

            <header id="header">    
          <nav id="subnav" class="fluid">
          <ul id="navmenu">
            <li><a href="#section1" onClick="scrollToAnchor('section1');" title="成立背景">SECTION 1</a></li>
            <li><a href="#section2" onClick="scrollToAnchor('section2');" title="協會使命">SECTION 2</a></li>
            <li><a href="#section3" onClick="scrollToAnchor('section3');" title="營運模式">SECTION 3</a></li>
            <li><a href="#section4" onClick="scrollToAnchor('section4');" title="協會組織">SECTION 4</a></li>
            <li><a href="#section5" onClick="scrollToAnchor('section5');" title="活動及刊物">SECTION 5</a></li>
          </ul>
        </nav>
      </header>

#navmenu li a .active {
 background-color: #294C52;
 color: #FFFFFF;
}

$(function () {

    $("body").onscroll(function () {
        $("#navmenu li").removeClass("active");
        if ($("body").scrollTop() > $("#section5").offset().top)
            $("#navmenu li").eq(4).addClass("active");
        else if ($("body").scrollTop() > $("#section4").offset().top)
            $("#navmenu li").eq(3).addClass("active");
        else if ($("body").scrollTop() > $("#section3").offset().top)
            $("#navmenu li").eq(2).addClass("active");
        else if ($("body").scrollTop() > $("#section2").offset().top)
            $("#navmenu li").eq(1).addClass("active");
        else
            $("#navmenu li").eq(0).addClass("active");
    });
});