对于最近的一个Wordpress项目，我创建了一个带有类别的固定子菜单。现在，客户端希望当他们向下滚动列出帖子摘录的页面时，该类别被突出显示。每个职位限报一个类别。我得到了要添加到菜单ID和帖子类的类别。
如果类和id匹配，我想在菜单项中添加一个“活动”类。我使用航点js添加滚动项目，并发现了一点jQuery，如果菜单链接和帖子id匹配。我尝试了一些方法，虽然我不能得到的代码位比较类和id：
// Helper functions
function getRelatedNavigation(el){
return $('nav a[href=#'+$(el).attr('id')+']');
}
// Waypoints
$('article')
.waypoint(function(direction) {
getRelatedNavigation(this).toggleClass('active', direction === 'down');
}, {
offset: '90%'
})
.waypoint(function(direction) {
getRelatedNavigation(this).toggleClass('active', direction === 'up');
}, {
offset: function() { return -$(this).height() + 100; }
});
关于如何更新Helper函数以比较nav id和article类或更好的Helper函数选项，有什么想法吗？
在阅读了许多关于jQuerywrapAll的信息丰富的SO主题后，我最终专注于一个简单的带有航点的toArray。小组课。我已经使用航点js的一些其他功能，我能够钩入group.first（）和group.last（）实例。对子菜单中每个项目标识为id的类别的变量回调，并使用这些变量选择具有类中标识的类别的部分。
function addSubNavClass(){
var catsArray = jQuery('#sub-menu li').map(function(){ return this.id }).toArray();
var bottomBarHeight = jQuery('#category-bar .bar').height(),
jQuery.each(catsArray, function(index, cat) {
var catSections = jQuery('.single-section.' + cat)
var relatedSubNav = jQuery('#sub-menu li#' + cat)
catSections.waypoint({
handler: function(direction) {
if (this === this.group.first()) {
relatedSubNav.toggleClass('current-menu-item', direction === 'down');
}
},
group: cat,
offset: '70%',
});
catSections.waypoint({
handler: function(direction) {
if (this === this.group.last()) {
relatedSubNav.toggleClass('current-menu-item', direction === 'up');
}
},
group: cat,
offset: function() {
return -jQuery(this.element).height() + bottomBarHeight + 30
},
});
})
}
