Цвет пункта меню

$(document).ready(function() { 
  $(document).on('scroll', onScroll); 
 
  // Плавная анимация 
  $('a[href^="#"]').on('click', function(e) { 
    e.preventDefault(); 
    $(document).off('scroll'); 
 
    $('a').each(function() { 
      $(this).removeClass('active'); 
    }); 
    $(this).addClass('active'); 
 
    var target = this.hash, 
      $target = $(target); 
 
    $('html, body').stop().animate({ 
      'scrollTop': $target.offset().top + 2 
    }, 500, 'swing', function() { 
      window.location.hash = target; 
      $(document).on('scroll', onScroll); 
    }); 
  }); 
}); 
 
function onScroll() { 
  var scrollPos = $(document).scrollTop(), 
    link = $('#menu-center').find('a'); 
 
  link.each(function() { 
    var currLink = $(this), 
      refElement = $(currLink.attr('href')); 
 
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 
      link.removeClass('active'); 
      currLink.addClass('active'); 
    } else { 
      currLink.removeClass('active'); 
    } 
  }); 
}

*, 
*::before, 
*::after { 
  box-sizing: border-box; 
} 
 
body, 
html { 
  font-family: Arial, sans-serif; 
  margin: 0; 
  padding: 0; 
  height: 100%; 
  width: 100%; 
} 
 
.container { 
  margin: 0 auto; 
  max-width: 960px; 
} 
 
.menu { 
  background-color: rgba(4, 180, 49, 0.6); 
  position: fixed; 
  transition: all 0.4s ease; 
  width: 100%; 
} 
 
#menu { 
  margin: 0; 
  padding: 0; 
} 
 
#menu li { 
  float: left; 
  list-style: none; 
} 
 
#menu a { 
  color: #000; 
  display: inline-block; 
  font-size: 14px; 
  line-height: 75px; 
  padding: 0 40px; 
  text-decoration: none; 
} 
 
#menu .active, 
#menu a:hover { 
  background-color: rgba(0, 0, 0, 0.12); 
  color: #fff; 
} 
 
section { 
  padding: 100px 25px 25px; 
} 
 
#home { 
  background-color: #286090; 
  height: 100vh; 
} 
 
#portfolio { 
  background: gray; 
  height: 100vh; 
} 
 
#about { 
  background-color: #07c; 
  height: 100vh; 
} 
 
#contact { 
  background-color: rgb(154, 45, 45); 
  height: 100vh; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="menu"> 
  <div class="container"> 
    <ul id="menu"> 
      <li><a href="#home" class="active">Главная</a></li> 
      <li><a href="#portfolio">Портфолио</a></li> 
      <li><a href="#about">О нас</a></li> 
      <li><a href="#contact">Контакт</a></li> 
    </ul> 
  </div> 
</div> 
 
<section id="home"> 
  <div class="container"> 
    Главная 
  </div> 
</section> 
<section id="portfolio"> 
  <div class="container"> 
    Портфолио 
  </div> 
</section> 
<section id="about"> 
  <div class="container"> 
    О нас 
  </div> 
</section> 
<section id="contact"> 
  <div class="container"> 
    Контакт 
  </div> 
</section>