scrollTop(） 返回元素下方的位置

scrollTop() returning position below element

本文关键字：位置 元素 返回 scrollTop      更新时间：2023-09-26

当导航栏经过我页面上的某些点时，我正在使用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');
  }
});

进行此更改为我解决了问题，我想您忘记了您将scrollTop视为滚动顶部+导航栏高度

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

突出显示执行此操作about 

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

你必须放弃.navbar高度（就像你在其他人中所做的那样）

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

在这里，您的代码笔可以 http://codepen.io/anon/pen/XXoLWM?editors=0110

您更新的笔在这里。切换按钮时计算有问题或条件更好：

} 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...
}
相关文章：