如何使用jQuery实现导航栏

我正在尝试使用jQuery实现导航栏导航。 但没有运气！ 请看看这个小提琴 。

我的要求是基于滚动的内容激活菜单项，并根据单击的菜单项滚动内容。 以下是代码

$('.menu-item').on('click', function () { var that = $(this); $('.menu-item').each(function () { $(this).removeClass('active'); }); that.addClass('active'); var index = that.index(); var target = $('.menu .menu-target').eq(index); $('.right').animate({ scrollTop: target.offset().top }, 500); }); $('.right').on('scroll', function () { var scrTop = $(this).scrollTop(), tgt = ""; $('.menu-target').each(function () { var th = $(this), offTop = th.offset().top; if (offTop > scrTop && && tgt === "") { tgt = th; } }); if (tgt !== "") { var index = tgt.index(); $('.menu-item').each(function () { $(this).removeClass('active'); }); $('.menu-item').eq(index).addClass('active'); } }); 

但这不起作用。 滚动时更新活动菜单项无效。 如何解决这个问题？

编辑试图解决问题，这里是代码http://jsfiddle.net/SfR2c/11/它正在处理基于滚动内容更新菜单元素的一些不一致！

Answer 1

替换它

  var target = $('.menu .menu-target').eq(index); 

这样

  var target = $('.right .menu-target').eq(index); 

Answer 2

已经有一个满足您需求的可行解决方案。 编程时请尽量重用。

解决方案是使用来自Twitter ScrollSpy的Bootstrap