How to change nav link color depending on page position

Question

Hi I am trying to work out how to get my sticky navigation links to change color on scroll when they reach their particular section on the page. At the moment I have it set so that when the nav links are clicked a scroll animation takes you to the particular section on the page and also adds an active class to the link (changes to red). I would just to have the active link change to red when its section is scrolled to. This is my current markup.

Thank you

 $("#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>

This is probably what you're looking for: [Test in JQuery if an element is at the top of screen](http://stackoverflow.com/a/7543724/4204026). — Drew Kennedy, Apr 11 '17 at 12:45

score 5 · Accepted Answer · answered Apr 11 '17 at 14:36

 $(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>

score 0 · Answer 2 · answered Apr 11 '17 at 13:07

You need to check current position of window on scroll. By position activate your link colour. Hoping your section height 440px. You can make it dynamic if you want instead of writing 440px in every if condition.

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

score 0 · Answer 3 · answered Apr 11 '17 at 14:03

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

This will do the trick but I suggest for future to avoid this kind of coding. You should make general functions which work on all the cases. For example, here, if you add one more section you will have to change the script too.

Baseer Ebadi · Answer 4 · 2020-03-29T04:45:27.713

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.

Kindly edit this so your instructions are not part of the code block. I see what should be normal text with what should be 3 separate code blocks, but it's tricky to determine. — Scratte, Mar 29 '20 at 07:57
You should also edit out hundreds of lines of your answer to make it the minimal code necessary to demonstrate your solution to the question. — David Buck, Mar 29 '20 at 09:22
In addition to the above two comments, most of your description text isn't in English. — MBorg, Mar 29 '20 at 09:48

How to change nav link color depending on page position

4 Answers4