javascript - scrollTop() 返回元素下方的位置

Question

当导航栏经过我页面上的某些点时，我正在使用 jquery 来突出显示它，但是有一个部分导航栏在它经过对象下方之前不会被突出显示。具体的违规者是页面的联系部分。

这是代码笔 - http://codepen.io/Davez01d/pen/NxMzYy?editors=0010

这是相关的 html -

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

CSS-

.on-section {
  background-color: #2766af !important;
  color: white;
}
.on-section:focus {
  color: white;
}

和 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');
  }
});

Answer 1

进行此更改为我解决了这个问题，我认为您忘记了您正在将 scrollTop 视为 scrollTop + navbar 高度

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