突出显示的菜单项在视差效果中过早突出显示

Question

我正在尝试构建一个具有视差效果的网站，并动态突出显示菜单项。

目前一切正常（视差和菜单项）但结合菜单项会产生奇怪的行为。它们过早地突出显示，因此菜单项在“主页”站点的开头从“主页”切换到“公司”，依此类推。

这是我正在使用的JS代码

$(document).ready(function() {
    $('.parallax').scroll(function() {

        var position = $(this).scrollTop();

        $('.parallax__group').each(function() {

            var target = $(this).offset().top;
            var id = $(this).attr('id');

            if (position >= target) {
                $('a').removeClass('active');
                $("a[href='#"+id+"']").addClass('active');
            }
        });
    });
});

正如我所说......它工作得很好但菜单项在到达新组时没有突出显示，但更早。可能是问题的根源是什么？如果需要，我可以提供更多代码。