How can I add an active class when the user scrolls to a section with smooth scroll?

Question

I am building a simple 1 page website & using JQuery to change the color of the nav links at the page. I have implemented smooth scroll which goes to each anchor nicely. I have also implemented a feature which allows the user to scroll down the page & the active class gets applied to the anchors in the nav changing the color.

Things are working almost correctly...except: When you click on a nav link the active class is not being applied to the correct link.

So far I have tried to change the way the classes are being applied & also the names to direct IDs but its still not behaving perfect. Theres clearly something incorrect happening with $('.nav li').eq(i).find('a').addClass('active');

Can anyone suggest how I can fix this?

Heres the CP with the html: https://codepen.io/nolimit966/pen/aboqvOP

Thank you

JS:

    $(window).on('scroll',function(){
        var WindowTop = $(window).scrollTop();
        $('section').each(function(i){
            if(WindowTop > $(this).offset().top - 50 && 
               WindowTop < $(this).offset().top + $(this).outerHeight(true)
              ){
                $('.nav > li > a').removeClass('active');
     $('.nav li').eq(i).find('a').addClass('active');
            }
        });
    });
          $('a[href*=#]:not([href=#])').click(function() {
            if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
              var target = $(this.hash);
              target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
              if (target.length) {
                $('html,body').animate({
                  scrollTop: target.offset().top
                }, 1000);
                return false;
              }
            }
          });
        });,

HTML:

        <h1>Test</h1>
     </header>
     <nav id="c-primary-nav__list-1" class="c-primary-nav__list">
        <ul class="nav">
           <li class="c-primary-nav__item">
              <a class="c-primary-nav__link" href="#about">About</a>
           </li>
           <li class="c-primary-nav__item">
              <a class="c-primary-nav__link active" href="#reservations">Reservations</a>
           </li>
           <li class="c-primary-nav__item">
              <a class="c-primary-nav__link" href="#contact">Contact</a>
           </li>
           <li class="c-primary-nav__item">
              <a class="c-primary-nav__link" href="#offers">Offers</a>
           </li>
        </ul>
        <div class="c-primary-nav__details">
        </div>
     </nav>
     <div class="l-content-blocks">
        <div class="l-content-blocks__wrapper">
           <section class="cb-about" id="about">
              <div class="cb-about__wrapper">
                 <div class="cb-about__container">
                    <div class="cb-about__intro-wrapper">
                       <h1 class="cb-about__h1" data-aos="fade-up">About </h1>
                    </div>
                    <div class="cb-about__image-showcase">
                       <div data-aos="fade-up" class="cb-about__showcase-item cb-about__showcase-item--image">
                          <div class="c-media" data-push-to-gallery-modal="">
                             </p>
                          </div>
                       </div>
                       <div data-aos="fade-up" class="cb-about__showcase-item cb-about__showcase-item--image">
                          <div class="c-media" data-push-to-gallery-modal="">
                             <p class="c-media__caption">Caption Header <em>Caption Copy</em>
                             </p>
                          </div>
                       </div>
                       <div class="cb-about__showcase-item cb-about__showcase-item--description">
                          <p data-aos="fade-up" class="cb-about__description">Description section 3 </p>
                       </div>
                       <div data-aos="fade-up" class="cb-about__showcase-item cb-about__showcase-item--image">
                          <div class="c-media" data-push-to-gallery-modal="">
                             <p class="c-media__caption">Caption Header <em>Caption copy</em>
                             </p>
                          </div>
                       </div>
                    </div>
                    <div class="cb-about__gallery-button-wrapper">
                       <div class="c-button ">
                          <a class="c-button__link" href="#" target="" data-toggle="c-modal"
                             data-target="#gallery-modal">Gallery CTA text</a>
                       </div>
                    </div>
                 </div>
              </div>
           </section>
           <section class="cb-our-menus" id="menus">
              <div class="cb-our-menus__wrapper">
                 <div class="cb-our-menus__container">
                    <div class="cb-our-menus__intro-wrapper">
                       <h1 class="cb-our-menus__h1">Our Menus</h1>
                    </div>
                    <div class="cb-our-menus__button-grid">
                       <div class="cb-our-menus__button-item">
                       </div>
                       <div class="cb-our-menus__button-item">
                       </div>
                       <div class="cb-our-menus__button-item">
                       </div>
                       <div class="cb-our-menus__button-item">
                       </div>
                       <div class="cb-our-menus__button-item">
                       </div>
                    </div>
                 </div>
              </div>
           </section>
           <section class="cb-offers" id="offers">
              <div class="cb-offers__wrapper">
                 <div class="cb-offers__container">
                    <h1 class="cb-offers__h1">Offer Option Header</h1>
                    <p class="cb-offers__intro intro">Something cool</p>
                    <div class="cb-offers__button-grid">
                       <div class="cb-offers__button-item">
                       </div>
                       <div class="cb-offers__button-item">
                       </div>
                    </div>
                    <div class="cb-offers__image-wrapper">
                       <div class="c-media" data-push-to-gallery-modal="">
                          <p class="c-media__caption">Caption Title <em>Caption Description</em>
                          </p>
                       </div>
                    </div>
                 </div>
              </div>
           </section>
           <section class="cb-reservations" id="reservations">
              <div class="cb-reservations__wrapper">
                 <div class="cb-reservations__container">
                    <h1 class="cb-reservations__h1">Reservations</h1>
                 </div>
              </div>
           </section>
           <section class="cb-contact" id="contact">
              <div class="cb-contact__wrapper">
                 <div class="cb-contact__container">
                    Contact info here
                 </div>
              </div>
              <div class="cb-contact__map-wrapper">
              </div>
           </section>
           <section class="cb-reservations" id="reservations">
              <div class="cb-reservations__wrapper">
                 <div class="cb-reservations__container">
                    <h1 class="cb-reservations__h1">fdsfdsf</h1>
                    <p class="cb-reservations__booking-description">fdsfsdfds</p>
                    <div class="cb-reservations__button-wrapper cb-reservations__button-wrapper--book">
                       <div class="c-button ">
                          <a class="c-button__link highlight"
                             target="">Book Now</a>
                       </div>
                    </div>
                 </div>
              </div>
           </section>
        </div>
        <section class="cb-newsletter">
           <div class="cb-newsletter__wrapper">
              <div class="cb-newsletter__container">
                 <h1 class="cb-newsletter__h1"> Newsletter</h1>
              </div>
           </div>
        </section>
        <section class="cb-signature-dishes">
           <div class="cb-signature-dishes__wrapper">
              <div class="cb-signature-dishes__container">
                 <h1 class="cb-signature-dishes__h1"> Dishes</h1>
              </div>
           </div>
        </section>
     </div>
     <footer>
        &copy;2019 Footer
     </footer>```

Answer 1

You can use a lib to simplify your implementation:

https://github.com/morr/jquery.appear

All your javascript would look like this:

        var addClassOnScroll = function () {
            $('section[id]').each(function (index, elem) {
                if($(elem).is(':appeared')) {
                    const elemId = $(elem).attr('id');
                    $("nav ul li a.active").removeClass('active');
                    $("nav ul li a[href='#" + elemId + "']").addClass('active');
                }
            });
        };

        $(window).on('scroll', function () {
            addClassOnScroll();
        });

Option without lib:

 var addClassOnScroll = function () {
            var windowTop = $(window).scrollTop();
            $('section[id]').each(function (index, elem) {
                var offsetTop = $(elem).offset().top;
                var outerHeight = $(this).outerHeight(true);

                if( windowTop > (offsetTop - 50) && windowTop < ( offsetTop + outerHeight)) {
                    var elemId = $(elem).attr('id');
                    $("nav ul li a.active").removeClass('active');
                    $("nav ul li a[href='#" + elemId + "']").addClass('active');
                }
            });
        };

        $(function () {
            $(window).on('scroll', function () {
                addClassOnScroll();
            });
        });