使用JQuery魔术线菜单的单页导航

Question

我创建了一个单页网站，我的内容被分成了一些框。我正在使用Magic Line菜单在框之间快速导航。现在，当我手动在框之间滚动时，我想弄清楚如何更改菜单中的当前页面项。 这就是我想在魔术线脚本中实现的。

// Bind to scroll
$(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 : "";

   if (lastId !== id) {
       lastId = id;
       // Set/remove active class
       menuItems
         .parent().removeClass("active")
         .end().filter("[href=#"+id+"]").parent().addClass("active");
   }                   
});

我整理了JSfiddle如何在我的页面上导航。

这是滚动页面时如何更新菜单的example。

非常感谢帮助！谢谢。