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

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>

Answer 2

您需要在滚动时检查窗口的当前位置。按位置激活您的链接颜色。 希望您的部分高度为 440 像素。如果你愿意，你可以让它动态化，而不是在每个 if 条件下都写 440px。

https://jsfiddle.net/Lsxht5bs/3/

$(document).ready(function(){
    $(window).scroll(function (event) {
        var scroll = $(window).scrollTop();
        if(scroll < 440){
         $("a").removeClass('active');
         $("#nav-item-1").addClass('active');
      }
      else if(scroll > 440 && scroll < 880){
         $("a").removeClass('active');
         $("#nav-item-2").addClass('active');
      }
      else if(scroll > 880 && scroll < 1320){
         $("a").removeClass('active');
         $("#nav-item-3").addClass('active');
      }
      else if(scroll >= 1320){
         $("a").removeClass('active');
         $("#nav-item-4").addClass('active');
      }
        });
  });

Answer 3

  $(document).ready(function(){
    $(window).scroll(function (event) {
         var top = $(window).scrollTop();
       var divH1 = $('#section1').outerHeight() - $('nav').outerHeight();
       var divH2 = divH1;
       var divH3 = divH2 + $('#section3').outerHeight();
       var divH4 = divH3 + $('#section4').outerHeight();
       if(top < divH1){
         $("a").removeClass('active');
         $("#nav-item-1").addClass('active');
       }
       if(top >= divH2){
         $("a").removeClass('active');
         $("#nav-item-2").addClass('active');
       }
       if(top >= divH3){
         $("a").removeClass('active');
         $("#nav-item-3").addClass('active');
       }
       if(top >= divH4){
         $("a").removeClass('active');
         $("#nav-item-4").addClass('active');
       }
        });
  });

这可以解决问题，但我建议将来避免这种编码。您应该制作适用于所有情况的通用功能。例如，在这里，如果您再添加一个部分，您也必须更改脚本。

Answer 4

Please Follow the bellow steps:

**Step1:** Paste the bellow script inside **<body>** tag:

  <div class="row">
     <div class="container">

      <nav class="qodef-main-menu qodef-drop-down qodef-default-nav">

        <ul id="menu-main-menu">    

            <li class="menu-item">
                <a href="#" class="nav-item active"  id="menu-item-1">First
                </a>                
            </li>

            <li class="menu-item">
                    <a href="#" class="nav-item"  id="menu-item-2">Second
                    </a>                
            </li>

            <li class="menu-item">
                    <a href="#" class="nav-item"  id="menu-item-3">Third
                    </a>                 
            </li>

            <li class="menu-item">
                    <a href="#" class="nav-item"  id="menu-item-4">Fourth
                    </a>                
            </li>

            <li class="menu-item">
                    <a href="#" class="nav-item"  id="menu-item-5">Fifth
                    </a>                
            </li>

        </ul>
      </nav>

     </div>
   </div>


  <div class="container" style="margin-top: 5em;">
    <section id="section1" class="section" style="margin: 3em 1em 3em 0;">
   <h2>Section 1:</h2>


        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <pre>
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </pre>
        </section>
        <section id="section2" class="section">
            <h2>Section2:</h2>

            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</pre>

        dfadslkf jakl;fjads
        <pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</pre>

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </section>
    <section id="section3" class="section">
        <h2>Section3:</h2>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    <pre>section3 .... Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</pre>
    </section>
    <section id="section4" class="section">
        <h2>section4:</h2>

        <pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</pre>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </section>
    <section id="section5" class="section">
        <h2>Section 5:</h2>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    <pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</pre>

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonenter code here
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    <pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</pre>

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    <pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</pre>

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </section>
  </div>

step2: Add the bellow script inside **Head** Tag:

<style type="text/css">
        .active {
          color: red;
        }
        ul{
            position: fixed;
            list-style-type: none;
            display: flex;
            margin-top: 3em;
            padding-top: 2em;

        }
        ul li{
            margin-right: 30px;
        }

    </style>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

step3: Add the bellow script before **</body>** Tag:

<script type="text/javascript">
$( document ).ready(function() { // Tells the function to wait to preform until everything on the page has loaded.

          $(window).scroll(function() { // Says this function is preformed continuisly while scrolling.
              var Scroll = $(window).scrollTop() + 1, // This variable finds the distance you have scrolled from the top.
                  SectionOneOffset = $('#section1').offset().top, // This variable finds the distance between #section-one and the top. Replace #section-one with the ID of your section.
                  SectionTwoOffset = $('#section2').offset().top,

                  SectionThreeOffset = $('#section3').offset().top,

                  SectionFourOffset = $('#section4').offset().top,

                  SectionFiveOffset = $('#section5').offset().top;
                   // This variable finds the distance between #section-two and the top. Replace #section-two with the ID of your section. You can duplicate this for as many sections as you want.

              if (Scroll >= SectionOneOffset) { // If you have scrolled past section one do this.
                  $("#menu-item-1").addClass("active"); // Adds class of current-menu-item to the menu item with a class of menu-item-1
              } else { // If you have not scrolled section one do this.
                  $("#menu-item-1").removeClass("active"); // Removes class of current-menu-item to the menu item with a class of menu-item-1
              }
              if (Scroll >= SectionTwoOffset) { // If you have scrolled past section two do this.You can duplicate this for as many sections as you want.
                  $("#menu-item-2").addClass("active"); // Adds class of current-menu-item to the menu item with a class of menu-item-2
                  $("#menu-item-1").removeClass("active"); // Removes class of current-menu-item to the menu item with a class of menu-item-1
              } else { // If you have not scrolled section two do this.
                  $("#menu-item-2").removeClass("active"); // Removes class of current-menu-item to the menu item with a class of menu-item-2
              }
               if (Scroll >= SectionThreeOffset) {

                $("#menu-item-3").addClass("active"); // Adds class of current-menu-item to the menu item with a class of menu-item-2
                $("#menu-item-1").removeClass("active");
                $("#menu-item-2").removeClass("active");

               } else{

                $("#menu-item-3").removeClass("active");

               }
               if (Scroll >= SectionFourOffset) {

                $("#menu-item-4").addClass("active");

                $("#menu-item-1").removeClass("active");
                $("#menu-item-2").removeClass("active");
                $("#menu-item-3").removeClass("active");

               }else{

                $("#menu-item-4").removeClass("active");
               }
               if (Scroll >= SectionFiveOffset) {

                $("#menu-item-5").addClass("active");

                $("#menu-item-1").removeClass("active");
                $("#menu-item-2").removeClass("active");
                $("#menu-item-3").removeClass("active"); 
                $("#menu-item-4").removeClass("active"); 

               }else{

                $("#menu-item-5").removeClass("active");
               }
          });

      }); 

that's it, browse the page and scroll to see the results, thanks.