当用户滚动到平滑滚动的部分时，如何添加活动 class？

Question

我正在构建一个简单的 1 页网站并使用 JQuery 更改页面导航 link 的颜色。我已经实现了平滑滚动，可以很好地到达每个锚点。我还实现了一项功能，允许用户向下滚动页面，活动 class 被应用到导航中的锚点，改变颜色。

事情几乎正常工作...除了：当您单击导航 link 时，活动 class 未应用于正确的 link.

到目前为止，我已尝试更改 classes 的应用方式以及直接 ID 的名称，但它仍然表现不完美。 $('.nav li').eq(i).find('a').addClass('active');

显然发生了一些不正确的事情

任何人都可以建议我如何解决这个问题吗？

这是与html的CP： https://codepen.io/nolimit966/pen/aboqvOP

谢谢

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

您可以使用库来简化您的实现：

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

你所有的 javascript 看起来像这样：

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

没有库的选项：

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

当用户滚动到平滑滚动的部分时，如何添加活动 class？

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

javascript

jquery

sticky