jqueryを使用してセクションに応じてメニュー項目を異なる色に変更する方法

Question

現時点では、私のnavbarは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'); 
    } 
}); 

その後、私は、私は製品のセクションまでスクロールして、その後、製品やサービスメニュー項目がハイライト表示されます...に関するメニュー項目がハイライト表示されます、程度にスクロールダウンして、など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; 
} 

それは

Answer 2

「ScrollSpy」をチェックしてください。それはあなたが望むものを正確に実行するBootstrap JSです。あなたの質問に答えることを願っています。 :)

Answer 3

私はこのjQueryのスクリプトが

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

にあなたがあなたのli要素は、カラー1、カラー2カラー3のような別のクラスを追加し、あなたが所有してあなたにそれをスタイル追加するには、このコードのヘルプをお手伝いをすると思います。あなたはすでにあなたは、単に各項目idを与える可能性があり、現在アクティブな項目のためのクラスactiveを切り替えるので

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

変更

your ul 

Answer 4

（または特定のclassのような：

は何を変更するには .item-1、 .item-2など）も使用し、CSSでスタイルを設定します。

#idOfItem1.active { 
    color: yellow; 
} 

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