当我向下滚动到特定部分时，菜单项颜色未正确更改

Question

当我滚动到 WordPress 网站中的部分时，如何将每个菜单项突出显示为它自己的颜色？ 例如：如果我向下滚动到关于部分，关于菜单项应该改变颜色。如果我滚动到联系人部分，菜单项应更改为不同的颜色，显然 ABOUT 应立即取消突出显示。

目前，当我向下滚动 150 像素时，菜单会固定在顶部。然后当我向下滚动到 about 部分时，菜单项变为粗体，当转到另一个部分时，相应的菜单项将立即变为粗体，并且显然 about 菜单项取消突出显示。

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

现在对于颜色，我将这个 sn-p 添加到第一个函数中，但颜色只有在我多次单击每个菜单项时才会改变。

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

有什么不同的方法解决这个问题？

Answer 1

    $(window).bind('scroll', function() {
        $('.toggle-menu').each(function() {
            var post = $(this);
            var position = post.position().top - $(window).scrollTop();
            
            if (position <= 0) {
                post.addClass('selected');
              var theID = $(this).attr('id');
              $('nav li a').removeClass('active');
              $('#nav-'+theID).addClass('active');
            } else {
                post.removeClass('selected');
            }
        });        
    });

.active {
color: red;
}

#nav-about.active {
color: green;
}

#nav-products.active {
color: gray;
}

#nav-scent.active {
color: yellow;
}
header {
position: relative;}
nav {
position: absolute;
display:block;
top:0;
left:0;
width:100%;
}

nav ul {
list-style: none;}
nav li {
display: inline-block;
padding: 5px 10px;}

section {
padding:150px;
border-top:1px solid red;}

.selected {
font-weigt: 600;
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav>
	<ul>
		<li><a class="active" id="nav-about" href="#about">About</a></li>
		<li><a id="nav-products" href="#products">Products</a></li>
		<li><a id="nav-scent" href="#scent">Scent</a></li>
		<li><a id="nav-clients" href="#clients">Clients</a></li>
	</ul>
</nav>
</header>

<section class="toggle-menu" id="about">
	<div class="wrap">
		About
	</div>
</section>

<section class="toggle-menu" id="products">
	<div class="wrap">
		Products
	</div>
</section>

<section class="toggle-menu" id="scent">
	<div class="wrap">
		Scent
	</div>
</section>

<section class="toggle-menu" id="clients">
	<div class="wrap">
		Clients
	</div>
</section>

这样的？