我试图重新创建类似于基金会麦哲伦导航(或此http://www.outyear.co.uk/smint/)的行为,我在其中使用inView(https://github.com/protonet/jquery.inview)来检测当前部分。我似乎无法检测当前项目并获取其类名称以用作导航选择器。插件已经存在于项目中,所以我只是利用它的存在。
到目前为止,我所拥有的是:https://jsfiddle.net/xrobhw2b/1/
$('section').bind('inview', function(e, isInView, visiblePartX, visiblePartY) {
var elem = $(this);
var curItemId = elem.attr('id');
var mainNav = $("#main-navigation ul");
if (elem.data('inviewtimer')) {
clearTimeout(elem.data('inviewtimer'));
elem.removeData('inviewtimer');
}
if (isInView) {
elem.data('inviewtimer', setTimeout(function() {
;
if (visiblePartY == 'top') {
elem.data('seenTop', true);
} else if (visiblePartY == 'bottom') {
elem.data('seenBottom', true);
} else {
elem.data('seenTop', true);
elem.data('seenBottom', true);
}
if (elem.data('seenTop') && elem.data('seenBottom')) {
console.log( $(elem).attr('id') );
mainNav.find('li').removeClass('active');
mainNav.find('.' + id ).addClass('active');
}
}, 0));
}
});