Question

我有一个很好的导航栏固定在窗口的顶部。当用户滚过某个div时，它将改变导航栏的背景颜色。到目前为止，它一直很适合我。

我最近在我的网站上添加了几个锚链接。现在，当用户点击锚链接并将其带到其上带有导航栏的页面时，导航栏的颜色不正确。只有当用户滚动一点时，导航栏才会改变颜色。但是当用户登陆页面时，我希望导航栏具有正确的背景颜色。

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

或者，如果您愿意，可以检查网址中是否存在#hash页面加载：

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

定义y位置后导航栏颜色更改

1 个答案: