javascript - 定义 y 位置后导航栏颜色变化

Question

我有一个固定在窗口顶部的漂亮的导航栏。当用户滚动经过某个 div 时，它会改变导航栏的背景颜色。到目前为止，它对我来说效果很好。

我最近在我的网站上添加了一些 anchor 链接。现在，当用户单击 anchor 链接并被带到带有导航栏的页面时，导航栏的颜色不正确。只有当用户稍微滚动时，导航栏才会改变颜色。但我希望导航栏在用户登陆页面后立即具有正确的背景颜色。

$( document ).ready(function() {

  var mainbottom = $('.changenavcolor').offset().top + $('.changenavcolor').height();

  // on scroll, 
  $(window).on('scroll',function(){

  // we round here to reduce a little workload
  stop = Math.round($(window).scrollTop());
  if (stop > mainbottom) {
      $('.os .navbar').addClass('navbarblue');
  } else {
      $('.os .navbar').removeClass('navbarblue');
  }

  });
});

HTML:

<header class="top-page-header">
<div class="page-overlay">
<div class="container">
  <div class="row">
    <div class="changenavcolor"></div>

</div>
</div>
</div>
</header>

我想我正在寻找的是在某个 y 坐标之后改变导航颜色的东西。就像在 y=100 之后改变导航颜色。我可能是错的，但我认为这可以解决问题。

Answer 1

您可以为您的链接添加一个功能，例如使用 a.anchorlink 作为选择器，或者如果您想要定位每个链接则只需使用 $('a') :

$('a.anchorlink').click(function () {
  $('.os .navbar').addClass('navbarblue');
});

或者您可以检查您的 URL 中是否有#hash on page load，如果您愿意:

if(window.location.hash) {
  // Hash exists, fire function, for example
  // $('.os .navbar').addClass('navbarblue');
} else {
  // Hash doesn't exist, fire function, for example
  // $('.os .navbar').removeClass('navbarblue');
}