Javascript scrollTop（）返回元素下方的位置

当导航栏通过页面上的某些点时，我使用jquery高亮显示导航栏，但有一部分导航栏在通过对象下方之前不会高亮显示。特定的罪犯是页面的联系人部分

这是密码笔-

以下是相关的html-

<hr id="contact-anchor" class="line section-seperator">

和javascript-

$(window).scroll(function() {
  var navHeight = $(".navbar").outerHeight();
  var scrollTop = $(window).scrollTop(); 
  var aboutPoint = $('#about').offset().top;
  var lineMargin = parseInt($('.section-seperator').css('marginTop'));
  var portfolioPoint = $('#portfolio-anchor').offset().top;
  var contactPoint = $('#contact-anchor').offset().top;

  if (scrollTop < aboutPoint)  {
    $('#home-btn').addClass('on-section');
    $('#about-btn').removeClass('on-section');
  } else if (scrollTop > aboutPoint && scrollTop < (portfolioPoint - navHeight)) {
    $('#home-btn').removeClass('on-section');
    $('#about-btn').addClass('on-section');
    $('#portfolio-btn').removeClass('on-section');
  } else if (scrollTop > (portfolioPoint - navHeight) && scrollTop < contactPoint) {
    $('#about-btn').removeClass('on-section');
    $('#portfolio-btn').addClass('on-section');
    $('#contact-btn').removeClass('on-section');
  } else if (scrollTop > (contactPoint - navHeight)) {
    $('#portfolio-btn').removeClass('on-section');
    $('#contact-btn').addClass('on-section');
  }
});

$（窗口）。滚动（函数（）{
var navHeight=$（“.navbar”）.outerHeight（）；
var scrollTop=$（窗口）.scrollTop（）；
var aboutPoint=$（'#about'）.offset（）.top；
var lineMargin=parseInt（$（'.section separator'）.css（'marginTop'））；
var portfolioPoint=$（“#投资组合锚”）.offset（）.top；
var contactPoint=$（'#contact anchor'）.offset（）.top；
如果（滚动顶部<关于点）{
$（'#home btn'）.addClass（'on-section'）；
$（“#about btn”）.removeClass（'on-section'）；
}else if（scrollTop>aboutPoint&&scrollTop<（portfolioPoint-navHeight））{
$（'#home btn'）.removeClass（'on-section'）；
$（'#about btn'）.addClass（'on-section'）；
$（“#公文包btn”）.removeClass（'on-section'）；
}else if（scrollTop>（portfolioPoint-navHeight）和&scrollTop<触点）{
$（“#about btn”）.removeClass（'on-section'）；
$（“#公文包btn”）.addClass（'on-section'）；
$（“#联系btn”）.removeClass（'on-section'）；
}else if（滚动顶部>（触点-导航高度））{
$（“#公文包btn”）.removeClass（'on-section'）；
$（“#联系btn”）.addClass（'on-section'）；
}
});

对我来说，进行此更改解决了这个问题，我想您忘记了您将

滚动顶部

视为滚动顶部+导航栏高度

var scrollTop = $(window).scrollTop() + navHeight;

---

要突出显示关于的

，请执行以下操作

if (scrollTop > (portfolioPoint - navHeight) && scrollTop < contactPoint)

在这里，您的代码笔工作正常
您的更新笔正在运行。切换按钮时，计算中出现问题或条件更好：

} else if (scrollTop > (portfolioPoint - navHeight) && scrollTop < contactPoint)) {
    // in this condition you stick too long, you forgot the navHeight
} else if (scrollTop > (contactPoint - navHeight)) {
    // therefore you reach this too late
}

}否则如果（scrollTop>（portfolioPoint-navHeight）和&scrollTop（触点-导航高度））{
//所以你来的太晚了
}

在这里的第一个条件中，您需要添加导航高度：

} else if (scrollTop > (portfolioPoint - navHeight) && 
  scrollTop < (contactPoint - navHeight))) {
    // like this it works
} else if (scrollTop > (contactPoint - navHeight)) {
    // and here we go...
}

}如果（滚动顶部>（portfolioPoint-navHeight）和
滚动顶部<（触点-导航高度）））{
//像这样就行了
}else if（滚动顶部>（触点-导航高度））{
//现在我们开始。。。
}

} else if (scrollTop > (portfolioPoint - navHeight) && scrollTop < contactPoint)) {
    // in this condition you stick too long, you forgot the navHeight
} else if (scrollTop > (contactPoint - navHeight)) {
    // therefore you reach this too late
}

} else if (scrollTop > (portfolioPoint - navHeight) && 
  scrollTop < (contactPoint - navHeight))) {
    // like this it works
} else if (scrollTop > (contactPoint - navHeight)) {
    // and here we go...
}