如何使用jQuery根据菜单项将菜单项更改为其他颜色

Question

目前，我的导航栏在WordPress网站上使用jquery执行以下操作：当我以150 px滚动时，它固定在顶部

var num = 150; //number of pixels before modifying styles
    $(window).bind('scroll', function () {
       if ($(window).scrollTop() > num) {
           $('nav#site-navigation').addClass('fixed');            
       } else {
           $('nav#site-navigation').removeClass('fixed');
    }
});  

然后，当我向下滚动到about时，about菜单项会突出显示...然后当我向下滚动到Products区域时，products and services菜单项会突出显示，about降价等等。

$("nav ul li a").addClass("marker");    
    var navLinks = $('nav ul li a'),
    navH = $('nav').height(),
    section = $('section'),
    documentEl = $(document);        
    documentEl.on('scroll', function() {            
      var currentScrollPos = documentEl.scrollTop();            
      section.each(function() {
        var self = $(this);
        if (self.offset().top < (currentScrollPos + navH ) && (currentScrollPos + navH) < (self.offset().top + self.outerHeight())) {
            var targetClass = '.' +self.attr('class') + 'marker';
            navLinks.removeClass('active');
            $(targetClass).addClass('active');
        }                
     });            
});

现在，如何根据自己的喜好使每个菜单项的颜色不同？ 例如：
如果我向下滚动到大约，它应该将菜单项颜色更改为绿色。 对于产品和服务，菜单项应为橙色...对于其他项，依此类推。

Answer 1

您可以像这样更新滚动功能：

$(window).bind('scroll', function () {
        if ($(window).scrollTop() > num) {
            $('nav#site-navigation').addClass('fixed');
            $("a.marker.active:contains(About)").addClass('item-2');        
            $("a.marker.active:contains(Products)").addClass('item-3');
            $("a.marker.active:contains(Scent)").addClass('item-4');
            $("a.marker.active:contains(Clients)").addClass('item-5');
            $("a.marker.active:contains(Contact)").addClass('item-6');
        } else {
            $('nav#site-navigation').removeClass('fixed');        
        }
    });   

在样式表中，您只需定位添加的每个类并进行操作即可。 例如：

a.marker.item-2.active {
    color: rgba(213, 221, 45, 0.6) !important;
}

让我知道它是否无效

Answer 2

签出“ ScrollSpy”。 它是一个Bootstrap JS，可以完全满足您的需求。 我希望它能回答您的问题。 :)

Answer 3

我认为这个jQuery脚本将帮助您

$(".colors .main-navigation ul.nav >li").each(function(i) {
 $(this).addClass("colors"+(i+1));
});

此代码可帮助您添加li元素，然后添加其他类（例如color1，color2，color3），然后自行设置样式。

更改内容：

$(".colors .main-navigation ul.nav >li")

更改

your ul

Answer 4

既然你已经切换类active当前活动的项目，你可以简单地给每个项目的id （或特定class像.item-1 .item-2等），以及通过CSS样式它们：

#idOfItem1.active {
  color: yellow;
}

#idOfItem2.active {
  color: red;
}
// etc.