title: How can I add an active class when the user scrolls to a section with smooth scroll?
body: <p>I am building a simple 1 page website &amp; 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 &amp; the active class gets applied to the anchors in the nav changing the color.</p>
  
  <p>Things are working almost correctly...except:
  When you click on a nav link the active class is not being applied to the correct link.</p>
  
  <p>So far I have tried to change the way the classes are being applied &amp; also the names to direct IDs but its still not behaving perfect. Theres clearly something incorrect happening with <code>$('.nav li').eq(i).find('a').addClass('active');</code></p>
  
  <p>Can anyone suggest how I can fix this?</p>
  
  <p>Heres the CP with the html:
  <a href="https://codepen.io/nolimit966/pen/aboqvOP" rel="nofollow noreferrer">https://codepen.io/nolimit966/pen/aboqvOP</a></p>
  
  <p>Thank you</p>
  
  <p>JS:</p>
  
  <pre><code>    $(window).on('scroll',function(){
          var WindowTop = $(window).scrollTop();
          $('section').each(function(i){
              if(WindowTop &gt; $(this).offset().top - 50 &amp;&amp; 
                 WindowTop &lt; $(this).offset().top + $(this).outerHeight(true)
                ){
                  $('.nav &gt; li &gt; a').removeClass('active');
       $('.nav li').eq(i).find('a').addClass('active');
              }
          });
      });
            $('a[href*=#]:not([href=#])').click(function() {
              if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') &amp;&amp; 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;
                }
              }
            });
          });,
  
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>        &lt;h1&gt;Test&lt;/h1&gt;
       &lt;/header&gt;
       &lt;nav id="c-primary-nav__list-1" class="c-primary-nav__list"&gt;
          &lt;ul class="nav"&gt;
             &lt;li class="c-primary-nav__item"&gt;
                &lt;a class="c-primary-nav__link" href="#about"&gt;About&lt;/a&gt;
             &lt;/li&gt;
             &lt;li class="c-primary-nav__item"&gt;
                &lt;a class="c-primary-nav__link active" href="#reservations"&gt;Reservations&lt;/a&gt;
             &lt;/li&gt;
             &lt;li class="c-primary-nav__item"&gt;
                &lt;a class="c-primary-nav__link" href="#contact"&gt;Contact&lt;/a&gt;
             &lt;/li&gt;
             &lt;li class="c-primary-nav__item"&gt;
                &lt;a class="c-primary-nav__link" href="#offers"&gt;Offers&lt;/a&gt;
             &lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class="c-primary-nav__details"&gt;
          &lt;/div&gt;
       &lt;/nav&gt;
       &lt;div class="l-content-blocks"&gt;
          &lt;div class="l-content-blocks__wrapper"&gt;
             &lt;section class="cb-about" id="about"&gt;
                &lt;div class="cb-about__wrapper"&gt;
                   &lt;div class="cb-about__container"&gt;
                      &lt;div class="cb-about__intro-wrapper"&gt;
                         &lt;h1 class="cb-about__h1" data-aos="fade-up"&gt;About &lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div class="cb-about__image-showcase"&gt;
                         &lt;div data-aos="fade-up" class="cb-about__showcase-item cb-about__showcase-item--image"&gt;
                            &lt;div class="c-media" data-push-to-gallery-modal=""&gt;
                               &lt;/p&gt;
                            &lt;/div&gt;
                         &lt;/div&gt;
                         &lt;div data-aos="fade-up" class="cb-about__showcase-item cb-about__showcase-item--image"&gt;
                            &lt;div class="c-media" data-push-to-gallery-modal=""&gt;
                               &lt;p class="c-media__caption"&gt;Caption Header &lt;em&gt;Caption Copy&lt;/em&gt;
                               &lt;/p&gt;
                            &lt;/div&gt;
                         &lt;/div&gt;
                         &lt;div class="cb-about__showcase-item cb-about__showcase-item--description"&gt;
                            &lt;p data-aos="fade-up" class="cb-about__description"&gt;Description section 3 &lt;/p&gt;
                         &lt;/div&gt;
                         &lt;div data-aos="fade-up" class="cb-about__showcase-item cb-about__showcase-item--image"&gt;
                            &lt;div class="c-media" data-push-to-gallery-modal=""&gt;
                               &lt;p class="c-media__caption"&gt;Caption Header &lt;em&gt;Caption copy&lt;/em&gt;
                               &lt;/p&gt;
                            &lt;/div&gt;
                         &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="cb-about__gallery-button-wrapper"&gt;
                         &lt;div class="c-button "&gt;
                            &lt;a class="c-button__link" href="#" target="" data-toggle="c-modal"
                               data-target="#gallery-modal"&gt;Gallery CTA text&lt;/a&gt;
                         &lt;/div&gt;
                      &lt;/div&gt;
                   &lt;/div&gt;
                &lt;/div&gt;
             &lt;/section&gt;
             &lt;section class="cb-our-menus" id="menus"&gt;
                &lt;div class="cb-our-menus__wrapper"&gt;
                   &lt;div class="cb-our-menus__container"&gt;
                      &lt;div class="cb-our-menus__intro-wrapper"&gt;
                         &lt;h1 class="cb-our-menus__h1"&gt;Our Menus&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div class="cb-our-menus__button-grid"&gt;
                         &lt;div class="cb-our-menus__button-item"&gt;
                         &lt;/div&gt;
                         &lt;div class="cb-our-menus__button-item"&gt;
                         &lt;/div&gt;
                         &lt;div class="cb-our-menus__button-item"&gt;
                         &lt;/div&gt;
                         &lt;div class="cb-our-menus__button-item"&gt;
                         &lt;/div&gt;
                         &lt;div class="cb-our-menus__button-item"&gt;
                         &lt;/div&gt;
                      &lt;/div&gt;
                   &lt;/div&gt;
                &lt;/div&gt;
             &lt;/section&gt;
             &lt;section class="cb-offers" id="offers"&gt;
                &lt;div class="cb-offers__wrapper"&gt;
                   &lt;div class="cb-offers__container"&gt;
                      &lt;h1 class="cb-offers__h1"&gt;Offer Option Header&lt;/h1&gt;
                      &lt;p class="cb-offers__intro intro"&gt;Something cool&lt;/p&gt;
                      &lt;div class="cb-offers__button-grid"&gt;
                         &lt;div class="cb-offers__button-item"&gt;
                         &lt;/div&gt;
                         &lt;div class="cb-offers__button-item"&gt;
                         &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="cb-offers__image-wrapper"&gt;
                         &lt;div class="c-media" data-push-to-gallery-modal=""&gt;
                            &lt;p class="c-media__caption"&gt;Caption Title &lt;em&gt;Caption Description&lt;/em&gt;
                            &lt;/p&gt;
                         &lt;/div&gt;
                      &lt;/div&gt;
                   &lt;/div&gt;
                &lt;/div&gt;
             &lt;/section&gt;
             &lt;section class="cb-reservations" id="reservations"&gt;
                &lt;div class="cb-reservations__wrapper"&gt;
                   &lt;div class="cb-reservations__container"&gt;
                      &lt;h1 class="cb-reservations__h1"&gt;Reservations&lt;/h1&gt;
                   &lt;/div&gt;
                &lt;/div&gt;
             &lt;/section&gt;
             &lt;section class="cb-contact" id="contact"&gt;
                &lt;div class="cb-contact__wrapper"&gt;
                   &lt;div class="cb-contact__container"&gt;
                      Contact info here
                   &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="cb-contact__map-wrapper"&gt;
                &lt;/div&gt;
             &lt;/section&gt;
             &lt;section class="cb-reservations" id="reservations"&gt;
                &lt;div class="cb-reservations__wrapper"&gt;
                   &lt;div class="cb-reservations__container"&gt;
                      &lt;h1 class="cb-reservations__h1"&gt;fdsfdsf&lt;/h1&gt;
                      &lt;p class="cb-reservations__booking-description"&gt;fdsfsdfds&lt;/p&gt;
                      &lt;div class="cb-reservations__button-wrapper cb-reservations__button-wrapper--book"&gt;
                         &lt;div class="c-button "&gt;
                            &lt;a class="c-button__link highlight"
                               target=""&gt;Book Now&lt;/a&gt;
                         &lt;/div&gt;
                      &lt;/div&gt;
                   &lt;/div&gt;
                &lt;/div&gt;
             &lt;/section&gt;
          &lt;/div&gt;
          &lt;section class="cb-newsletter"&gt;
             &lt;div class="cb-newsletter__wrapper"&gt;
                &lt;div class="cb-newsletter__container"&gt;
                   &lt;h1 class="cb-newsletter__h1"&gt; Newsletter&lt;/h1&gt;
                &lt;/div&gt;
             &lt;/div&gt;
          &lt;/section&gt;
          &lt;section class="cb-signature-dishes"&gt;
             &lt;div class="cb-signature-dishes__wrapper"&gt;
                &lt;div class="cb-signature-dishes__container"&gt;
                   &lt;h1 class="cb-signature-dishes__h1"&gt; Dishes&lt;/h1&gt;
                &lt;/div&gt;
             &lt;/div&gt;
          &lt;/section&gt;
       &lt;/div&gt;
       &lt;footer&gt;
          &amp;copy;2019 Footer
       &lt;/footer&gt;```
  </code></pre>