如何设置class="活动"到两个独立的基于滚动的链接

试图找到一种方法，当网页的某个区域滚动到单页站点时，将链接设置为导航条的活动状态

我有这个工作为我的主菜单，可以看到更大的分辨率显示器，但是我也有一个移动设备的辅助菜单，尽管所有的尝试似乎从来没有工作过。我试过设置两者或只是设置手机本身无济于事。下面是我的导航条代码的副本，以及我使用的java脚本来设置活动

<!-- Start Header Section -->
<div class="hidden-header"></div>
<header class="clearfix">
  <!-- Start Top Bar -->
  <div class="top-bar">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <!-- Start Contact Info -->
          <ul class="contact-details">
            <li><a href="#"><i class="fa fa-phone"></i> +1 (000) 000 0000</a></li>
            <li><a href="#"><i class="fa fa-envelope-o"></i> email@domain.com</a></li>
          </ul>
          <!-- End Contact Info -->
        </div>
        <!-- .col-md-6 -->
        <div class="col-md-6">
          <!-- Start Social Links -->
          <ul class="social-list">
            <li><a class="facebook itl-tooltip" data-placement="bottom" title="Facebook" href="#"><i class="fa fa-facebook"></i></a></li>
            <li><a class="twitter itl-tooltip" data-placement="bottom" title="Twitter" href="#"><i class="fa fa-twitter"></i></a></li>
            <li><a class="google itl-tooltip" data-placement="bottom" title="Google Plus" href="#"><i class="fa fa-google-plus"></i></a></li>
          </ul>
          <!-- End Social Links -->
        </div>
        <!-- .col-md-6 -->
      </div>
      <!-- .row -->
    </div>
    <!-- .container -->
  </div>
  <!-- .top-bar -->
  <!-- End Top Bar -->
  <!-- Start  Logo & Naviagtion  -->
  <div class="navbar navbar-default navbar-top">
    <div class="container">
      <div class="navbar-header">
        <!-- Stat Toggle Nav Link For Mobiles -->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <i class="fa fa-bars"></i>
        </button>
        <!-- End Toggle Nav Link For Mobiles -->
        <a class="navbar-brand" href="index.html">
          <img alt="AltTxt" src="images/logo.svg">
        </a>
      </div>
      <div id="menu-center" class="navbar-collapse collapse">
        <!-- Start Navigation List -->
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#home">Home</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
        <!-- End Navigation List -->
      </div>
    </div>
    <!-- Mobile Menu Start -->
    <ul class="wpb-mobile-menu">
          <li><a href="#home">Home</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
    </ul>
    <!-- Mobile Menu End -->
  </div>
  <!-- End Header Logo & Naviagtion -->
</header>
<!-- End Header Section -->

下面是我用来修改主菜单的javascript:

     $(document).ready(function () {
    $(document).on("scroll", onScroll);
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');
        var target = this.hash;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});
function onScroll(event){
    var scrollPosition = $(document).scrollTop();
    $('#menu-center a').each(function () {
        var currentLink = $(this);
        var refElement = $(currentLink.attr("href"));
        if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
            $('#menu-center ul li a').removeClass("active");
            currentLink.addClass("active");
        }
        else{
            currentLink.removeClass("active");
        }
    });
}

编辑:这是我正在使用的新代码，它适用于两个菜单，但不是所有部分。

    var navItems = jQuery('.menu-item a');
var win = jQuery(window);
var items = jQuery('.item');

navItems.click(function(e){
    var item = jQuery(this);
    jQuery('.menu-item a.active').removeClass('active');
    item.addClass('active');
});

win.scroll(function(e){
    jQuery.each(items, function(key, value){
        var item = jQuery(value);
        console.log(win.scrollTop(), item.offset().top);
        if(win.scrollTop() >= item.offset().top){
            jQuery('.menu-item a.active').removeClass('active');
            var id = item.attr('id');
            jQuery.each(navItems, function(key, value){
                var navItem = jQuery(value);
                if(navItem.attr('href') == '#'+id) navItem.addClass('active');
            });
        }
    });
});