Javascript 在导航栏中高亮显示当前部分

我有一个带有导航栏的滚动页面，我希望用户正在滚动的部分在导航栏中突出显示。目前，它几乎完成了这一点，但突出了不正确的链接

游行正在进行中

执行此操作的代码如下所示：

// highlight current tab
    $(window).on("scroll", function() {

        var currentPos = $(window).scrollTop();

        $('.nav li a').each(function() {
            var sectionLink = $(this);
            var section = $(sectionLink.attr('href'));
            if(section.position().top <= currentPos && sectionLink.offset().top + section.height() >= currentPos) {
                $('.nav li').removeClass('active');
                sectionLink.parent().addClass('active');
            }
            else {
                sectionLink.parent().removeClass('active');
            }
        });

    });

我尝试了几种方法，但无法将活动类可靠地添加到正确的会话中。谢谢你的帮助

编辑：更清楚地说，问题在于，当您滚动一点到某个部分时，它只会高亮显示该部分，而不是在顶部，这意味着当您单击某个部分以自动滚动到该部分的顶部时，该部分不会高亮显示

edit2:因此将if语句更改为：

if(currentPos + $('#nav-wrapper').outerHeight() >= section.position().top && currentPos + $('#nav-wrapper').outerHeight() <= sectionLink.offset().top + section.outerHeight()) {

---

虽然没有完全解决问题，但已取得改进。主页、关于和公文包部分都突出显示了正确的链接，但没有显示联系人。

您需要考虑导航栏的高度，并从要突出显示的部分顶部减去它

高度目前在CSS中以75px硬编码，但我为高度添加了一个jQuery选择器，以防在较小屏幕上需要更改/消失

顺便说一句，干得不错

$(window).on("scroll", function() {
  var currentPos = $(window).scrollTop();

  $('.nav li a').each(function() {
    var sectionLink = $(this);
    // capture the height of the navbar
    var navHeight = $('#nav-wrapper').outerHeight() + 1;
    var section = $(sectionLink.attr('href'));

    // subtract the navbar height from the top of the section
    if(section.position().top - navHeight  <= currentPos && sectionLink.offset().top + section.height()> currentPos) {
      $('.nav li').removeClass('active');
      sectionLink.parent().addClass('active');
    } else {
      sectionLink.parent().removeClass('active');
    }
  });        
});

---

非常感谢您的帮助和友好的话语，但由于某些原因，联系人部分仍然没有突出显示。你知道为什么会这样吗？啊，改变navHeight选择器以选择导航包装id。差异是几个像素的问题，可能是由于一些轻微的div填充造成的。编辑是我的答案！准确地说，$'navbar-wrapper'的高度为70px，$'.navbar.navbar默认值。navbar静态顶部。词缀'的高度为69px。这是1px的一个不同之处，它阻止了逻辑将活动状态添加到联系人链接。我已经尝试过了，但仍然是一样的。奇怪的是，if语句中的section.position.top-navHeight-1可以很好地工作，尽管这样做感觉不太正确。只需一个像素就可以将其抛出try navHeight=$'nav-wrapper'。outerHeight+1