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

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

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，{{ 1}}等等，并通过CSS设置它们的样式：

#idOfItem1.active {
  color: yellow;
}

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

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

4 个答案: