Javascript 如何设置类="；主动的；基于滚动创建两个单独的链接

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

我的主菜单可以通过更大分辨率的显示器看到，但我还有一个用于移动设备的辅助菜单，尽管进行了各种尝试，它似乎都不起作用。我尝试过两种设置，或者仅仅设置手机本身都没有用。下面的任何帮助都是我的导航条代码的副本，以及我使用的设置活动的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 -->

---

Ok找到了导致新代码无法完全工作的错误。去图使用另一个人的代码和意外有一个重复类。对于其他尝试这样做的人，以下内容适用于我：

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


navItems.click(function(e){
    var segment = jQuery(this);

    jQuery('.nav-item a.active').removeClass('active');
    segment.addClass('active');
});



win.scroll(function(e){
    jQuery.each(items, function(key, value){
        var segment = jQuery(value);
        console.log(win.scrollTop(), segment.offset().top);
        if(win.scrollTop() >= segment.offset().top){
            jQuery('.nav-item a.active').removeClass('active');
            var id = segment.attr('id');

            jQuery.each(navItems, function(key, value){
                var navItem = jQuery(value);
                if(navItem.attr('href') == '#'+id) navItem.addClass('active');
            });
        }
    });
});

---

确保将任何菜单项的

设置为

class=“nav item”

，并将任何

设置为

class=“segment”

A可能会有所帮助，因为很难直接跳入代码墙。一个非常小的注释（与您的问题没有直接关系），但您可以重写

$（'A'）。每个（函数（）{$（this）。removeClass（'active'）；}）作为简单的
$（'a'）。removeClass（'active'）；
。它们的结果是相同的。我发现一些其他代码在某种程度上对我有效。我的“家”不起作用，有一个bug然而，我之前没有发布提琴的原因是因为正在进行的工作相当大，特别是css和js。@freefaller ty指出，如果我仍然使用该位，它肯定会清理代码。
    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');
            });
        }
    });
});

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


navItems.click(function(e){
    var segment = jQuery(this);

    jQuery('.nav-item a.active').removeClass('active');
    segment.addClass('active');
});



win.scroll(function(e){
    jQuery.each(items, function(key, value){
        var segment = jQuery(value);
        console.log(win.scrollTop(), segment.offset().top);
        if(win.scrollTop() >= segment.offset().top){
            jQuery('.nav-item a.active').removeClass('active');
            var id = segment.attr('id');

            jQuery.each(navItems, function(key, value){
                var navItem = jQuery(value);
                if(navItem.attr('href') == '#'+id) navItem.addClass('active');
            });
        }
    });
});