我有一个单页应用程序。单击导航链接时,有一个脚本会向下滚动到适当的部分。这工作正常。
$('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');
}
}
我唯一的问题是,当我点击导航链接时——假设我点击了最后一个将您带到页面底部的链接。在页面底部的简短动画滚动期间,由于第二个脚本,沿途的部分会在您经过它们时一个接一个地突出显示。
我想在单击导航元素链接时将其设为突出显示,并且以某种方式禁用滚动突出显示(但如果您开始滚动,它仍然有效)。
最佳答案
将您的突出显示绑定(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;
});
关于jquery - 单页 - 导航动画滚动和突出显示的导航栏链接冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33713611/