javascript - 如何使用 jquery 根据其部分将菜单项更改为不同的颜色

Question

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

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');
    }
});  

然后当我向下滚动到关于时，关于菜单项会突出显示...然后当我向下滚动到产品部分时，产品和服务菜单项会突出显示，关于 dehighlihts 等等。

$("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;
}

如果不行请告诉我