Javascript 粘性导航未正确添加活动链接

我正在尝试实现一个导航。我过去也这样做过

<nav>
<ul id="mainNav">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#work">Work</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>    
  </ul>
</nav>
<section id="home"><h2>Home</h2></section>
<section id="work" data-sr><h2>Work</h2></section>
<section id="about"><h2>About</h2></section>
<section id="contact"><h2>Contact</h2></section>

// Cache selectors

var lastId,
 topMenu = $("#mainNav"),
 topMenuHeight = topMenu.outerHeight()+1,
 // All list items
 menuItems = topMenu.find("a"),
 // Anchors corresponding to menu items
 scrollItems = menuItems.map(function(){
   var item = $($(this).attr("href"));
    if (item.length) { return item; }
 });

// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
  var href = $(this).attr("href"),
      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
  $('html, body').stop().animate({ 
      scrollTop: offsetTop
  }, 850);
  e.preventDefault();
});
$(window).scroll(function(){
   // Get container scroll position
   var fromTop = $(this).scrollTop()+topMenuHeight;

   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";

   if (lastId !== id) {
       lastId = id;
       // Set/remove active class
       menuItems
         .parent().removeClass("active")
         .end().filter("[href=#"+id+"]").parent().addClass("active");
   }                   
});

家
工作
关于
接触
//缓存选择器
var lastId，
topMenu=$（“#主导航”），
topMenuHeight=topMenu.outerHeight（）+1，
//所有列表项
menuItems=topMenu.find（“a”），
//与菜单项相对应的锚定
scrollItems=menuItems.map（函数（）{
var item=$（$（this.attr（“href”））；
if（item.length）{return item；}
});
//将单击处理程序绑定到菜单项
//所以我们可以得到一个奇特的卷轴动画
菜单项。单击（函数（e）{
var href=$（this.attr（“href”），
offsetTop=href==“#”？0:$（href）.offset（）。顶部菜单高度+1；
$（'html，body'）.stop（）.animate（{
滚动顶：偏置
}, 850);
e、 预防默认值（）；
});
$（窗口）。滚动（函数（）{
//获取容器滚动位置
var fromTop=$（this.scrollTop（）+topMenuHeight；
//获取当前滚动项目的id
var cur=scrollItems.map（函数（）{
if（$（this）.offset（）.top

要求：-我希望导航有链接，可以根据要求交换

问题：-在上面的代码笔中，当我交换链接时，它没有正确地添加活动类。如果我交换了导航链接和节链接，那么只有它工作良好。 例如，如果我的导航有家庭、工作、关于和联系。然后，我应该能够交换工作链接和联系人链接的位置，并且我的粘性导航应该能够正确地添加活动类，而无需移动它们各自的部分

---

请帮助我实现上述场景。

下面的代码应该可以解决您的问题

// Cache selectors
var lastId,
 topMenu = $("#mainNav"),
 topMenuHeight = topMenu.outerHeight()+1,
 // All list items
 menuItems = topMenu.find("a"),
 // Anchors corresponding to menu items
 scrollItems = $('section');

// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
  var href = $(this).attr("href"),
      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
  $('html, body').stop().animate({ 
      scrollTop: offsetTop
  }, 850);
  e.preventDefault();
  setActiveNav(href);
});

function setActiveNav(href) {
  menuItems.each((index, menu) => {
    if(menu.hash === href) {
      $(menu).parent().addClass('active');
    } else {
      $(menu).parent().removeClass('active');
    }
  });
}

$(window).scroll(function(){
   // Get container scroll position
   var fromTop = $(this).scrollTop();


   // Get id of current scroll item
   var cur = scrollItems.toArray().findIndex(item => {
    return (item.offsetTop >= fromTop);
});
   // Get the id of the current element
   var id = cur && cur > -1 ? scrollItems[cur].id : "";

   if (lastId !== id) {
       lastId = id;
       // Set/remove active class
       menuItems
         .parent().removeClass("active")
         .end().filter("[href=#"+id+"]").parent().addClass("active");
   }
});

在单独的功能中构建功能将解决未来的维护开销

---

大多数问题都与结构、元素索引和位置有关。

嗨，你能不能把这个在卷轴上也像在代码笔中一样工作？@amy这是我用过的代码笔[。请看一下，让我知道你的确切要求。是的。谢谢你在单击时让它工作。但我想要同样的行为（指添加活动类）也可以滚动。就像你滚动，那么特定的部分会突出显示（与我发布的代码笔中的工作方式相同）@amy我已经更新了代码，使其适用于滚动和单击功能。请检查并让我知道所需的任何更改。2件事-1.当索引变为0时，它拒绝检测的id。其次，当索引为-1时，它给我一个无法读取的属性“id”，该属性具有未定义的错误