单页导航动画滚动和突出显示的导航栏链接冲突

Question

我有一个单页应用程序。当单击导航链接时，有一个脚本会向下滚动到相应的部分。这很好用。

$('nav a').click(function(){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 700);
    return true;
});

我还设置了一个脚本，这样当你向上/向下滚动页面时，相应部分的相应导航链接就会突出显示。这也很好。

$(document).scroll(function(){
        positionNav('portfolio', 'nav-portfolio');
        positionNav('about', 'nav-about');
        positionNav('contact', 'nav-contact');
    });
    function positionNav(section, sectionNavID) {
        // Get bottom position of section
        var bottom = $('#' + section).position().top + $('#' + section).outerHeight(true);
        var top = $(document).scrollTop()+230;
        if(top >= $('#' + section).position().top && top <= bottom){
            $('#' + sectionNavID).addClass('active');
        } else {
            $('#' + sectionNavID).removeClass('active');
        }
    }

我唯一的问题是，当我点击导航链接时——比方说，我点击了最后一个链接，它会把你带到页面的底部。在短暂的动画滚动到页面底部的过程中，由于第二个脚本，当你经过它们时，沿途的部分会一个接一个地突出显示。

我想做的是，如果点击导航项目链接，该项目会被高亮显示，并且滚动高亮显示会被禁用（但如果你开始滚动，仍然有效）。

Answer 1

将高亮显示绑定到一个特殊的类，可以称之为"enabled"。

在开始滚动动画之前，请将其移除，这样就不会触发高亮显示。

滚动动画完成后，再次添加类"enabled"以使您的设置再次正常工作。

示例：

$('nav a').click(function(){
    $(yourSelector).removeClass('enable');
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 700, function(){
        $(yourSelector).addClass('enable');
    });
    return true;
});