Cacher is the code snippet organizer for pro developers

$(document).ready(function(){

  // плавная прокрутка
  $("[data-target]").on('click', function(event) {

    $(this).addClass("nav-item-active").siblings().removeClass("nav-item-active");

    if (this.hash !== "") {
      event.preventDefault();

      var hash = this.hash;

      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        window.location.hash = hash;
      });

    }
  }); 
  // плавная прокрутка


  // меняем класс пунктов меню при прокрутке
  $(window).bind('scroll', function() {
      var currentTop = $(window).scrollTop();
      var elems = $('.section');
      elems.each(function(index){
        var elemTop   = $(this).offset().top;
        var elemBottom  = elemTop + $(this).height();
        if(currentTop >= elemTop && currentTop <= elemBottom){
          var id    = $(this).attr('id');
          var navElem = $('a[href="#' + id+ '"]');
          navElem.addClass('nav-item-active').siblings().removeClass( 'nav-item-active' );
        }
      })
  });
  // меняем класс пунктов меню при прокрутке

});

/*
  <nav class="nav-item">
    <a href="#green" class="nav-item nav-item-active" data-target>Green</a>
    <a href="#blue" class="nav-item" data-target>Blue</a>
    <a href="#yellow" class="nav-item" data-target>Yelow</a>
    <a href="#red" class="nav-item" data-target>Red</a>
    <a href="#gray" class="nav-item" data-target>Gray</a>
  </nav>
  
   <section class="green section" id="green"></section>
    <section class="blue section" id="blue"></section>
    <section class="section yellow" id="yellow"></section>
    <section class="red section" id="red"></section>
    <section class="gray section" id="gray"></section>
*/