如何使用 jquery 在引导程序中滚动时更改活动类？

Question

它是一个登陆页面，因此所有导航链接都代表同一页面上的一个部分。

我的导航栏

 <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand Name</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">            
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="#home">Home</a></li>  
              <li><a href="#about">About Us</a></li> 
              <li><a href="#choose">Why This Company</a></li> 
              <li><a href="#mission">Mission and Vision</a></li> 
              <li><a href="#services">Services</a></li> 
              <li><a href="#">How it Works</a></li> 
              <li><a href="#destination">Destination</a></li> 
              <li><a href="#associate">Associate Partners</a></li>             
              <li><a href="#contact">Contact Us</a></li> 
            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>

点击它使用 jquery 更改活动类

        $(document).ready(function () {
    $('.nav li a').click(function(e) {

        $('.nav li').removeClass('active');

        var $parent = $(this).parent();
        if (!$parent.hasClass('active')) {
            $parent.addClass('active');
        }
    });
});

我无法在滚动时执行此操作。每个导航链接代表同一页面上的一个部分。

谢谢。

Answer 1

<div id="about"></div>
...

 $(window).on('scroll', function(event){
   var scrollPos = $(document).scrollTop();
   $(".nav li a").each(function () {
     var currLink = $(this);
     var refElement = $(currLink.attr("href"));

     if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
       currLink.parent().addClass("active").siblings().removeClass("active"); 
       return;
     }
     else{
       currLink.parent().removeClass("active");
     }
   })
 })