如何根据页面位置更改导航链接颜色

Question

嗨，我正在努力研究如何让我的粘性导航链接在到达页面上的特定部分时更改滚动颜色。目前我已经设置好了，当点击导航链接时，滚动动画会将您带到页面上的特定部分，并向链接添加一个活动类（更改为红色）。当滚动到其部分时，我只想将活动链接更改为红色。这是我目前的标记。

谢谢

 $("#nav-item-1").click(function () {
    $('html, body').animate({
      scrollTop: $("#section1").offset().top
    }, 2000);
  });
  $("#nav-item-2").click(function () {
    $('html, body').animate({
      scrollTop: $("#section2").offset().top
    }, 2000);
  });
  $("#nav-item-3").click(function () {
    $('html, body').animate({
      scrollTop: $("#section3").offset().top
    }, 2000);
  });
  $("#nav-item-4").click(function () {
    $('html, body').animate({
      scrollTop: $("#section4").offset().top
    }, 2000);
  });

  $("#nav-item-1").click(function () {
    $("a").removeClass('active');
    $("#nav-item-1").addClass('active');
  });
  $("#nav-item-2").click(function () {
    $("a").removeClass('active');
    $("#nav-item-2").addClass('active');
  });
  $("#nav-item-3").click(function () {
    $("a").removeClass('active');
    $("#nav-item-3").addClass('active');
  });
  $("#nav-item-4").click(function () {
    $("a").removeClass('active');
    $("#nav-item-4").addClass('active');
  });

    * {
      padding: 0;
      margin: 0;
    }
    
    .active {
      color: red;
    }
    
    .container {
      width: 800px;
    }
    
    a {
      text-decoration: none;
      color: inherit;
    }
    
    section {
      padding: 200px 0;
      width: 100%;
      text-align: center;
      font-size: 35px;
    }
    
    #section1 {
      background: #fafafa;
    }
    
    #section2 {
      background: #e2e2e2;
    }
    
    #section3 {
      background: #c9c9c9;
    }
    
    #section4 {
      background: #d4d4d4;
    }
    
    nav {
      position: fixed;
      text-align: center;
      width: 100%;
      background: black;
      padding: 25px 0;
    }
    
    nav ul {
      list-style: none;
      text-align: center;
    }
    
    nav ul li {
      display: inline-block;
      margin-right: 40px;
      color: #fff;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <nav>
      <ul>
        <li><a href="#" id="nav-item-1" class="active">section1</a></li>
        <li><a href="#" id="nav-item-2">section2</a></li>
        <li><a href="#" id="nav-item-3">section3</a></li>
        <li><a href="#" id="nav-item-4">section4</a></li>
      </ul>
    </nav>
  </div>


  <section id="section1">Section 1</section>
  <section id="section2">Section 2</section>
  <section id="section3">Section 3</section>
  <section id="section4">Section 4</section>

Answer 1

 $(document).ready(function(){
    $(".nav-item").click(function () {
      $("a.active").removeClass('active');
      $(this).addClass('active');
      var active_section = $(this).attr('href'); //get active section id
      $('html, body').animate({
      //and scroll to the section
      scrollTop: $(active_section).offset().top
      }, 1000);
    });
  
  
   $(document).scroll(function () {
   //get document scroll position
     var position = $(document).scrollTop(); 
     //get header height
     var header = $('nav').outerHeight();
     
     //check active section
     $('.section').each(function(i) {
         if($(this).position().top <= (position + header))
          {
               $("a.active").removeClass('active');
               $("a").eq(i).addClass('active');
          }
      });
   }); 
  
 });

  

* {
      padding: 0;
      margin: 0;
    }
    
    .active {
      color: red;
    }
    
    .container {
      width: 800px;
    }
    
    a {
      text-decoration: none;
      color: inherit;
    }
    
    section {
      padding: 200px 0;
      width: 100%;
      text-align: center;
      font-size: 35px;
    }
    
    #section1 {
      background: #fafafa;
    }
    
    #section2 {
      background: #e2e2e2;
    }
    
    #section3 {
      background: #c9c9c9;
    }
    
    #section4 {
      background: #d4d4d4;
    }
    
    nav {
      position: fixed;
      text-align: center;
      width: 100%;
      background: black;
      padding: 25px 0;
    }
    
    nav ul {
      list-style: none;
      text-align: center;
    }
    
    nav ul li {
      display: inline-block;
      margin-right: 40px;
      color: #fff;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <nav>
      <ul>
        <li><a href="#section1" id="nav-item-1" class="nav-item active">section1</a></li>
        <li><a href="#section2" id="nav-item-2" class="nav-item">section2</a></li>
        <li><a href="#section3" id="nav-item-3" class="nav-item">section3</a></li>
        <li><a href="#section4" id="nav-item-4" class="nav-item">section4</a></li>
      </ul>
    </nav>
  </div>


  <section id="section1" class="section">Section 1</section>
  <section id="section2" class="section">Section 2</section>
  <section id="section3" class="section">Section 3</section>
  <section id="section4" class="section">Section 4</section>