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

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

将您的突出显示绑定(bind)到一个特殊的类，也许称之为“启用”。

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

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

例子:

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