2

我正在尝试使用 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/ 它在基于滚动内容更新菜单元素时存在一些不一致！

4

2 回答 2

1

替换这个

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

这样

 var target = $('.right .menu-target').eq(index);
于 2013-10-11T10:43:46.947 回答
-3

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

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

于 2013-10-11T10:30:44.330 回答