滚动时更改菜单链接颜色时出现问题

Question

我尝试在滚动时更改导航栏链接的颜色，如果它们在顶部的位置必须与主色保持一致， 我尝试使用jquery添加和删除类，但是当我第一次滚动它们时，它们将永远更改，否则我必须刷新页面

**

$(window).scroll(function() {
  if ($(document).scrollTop() > 600) {
    $('.navbar , a:link ').addClass('color-change');
  } else {
    $('.navba , a:visited').removeClass('color-change');
  };
});

.navbar {
  position: fixed;
  width: 100%;
  height: 70px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  color: white;
  background-color: blue;
  margin: auto;
  margin-top: 10px;
  padding-top: 30px;
  z-index: 9000;
}

.navbar.color-change {
  background-color: white;
  height: 60px;
  color: black;
  margin: auto;
  padding-top: 20px;
}

a.color-change {
  text-decoration: none;
  color: black;
}


/*make sure the content is tall enough to scroll for this example*/
div.content {
  min-height: 2000px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar">
  <div class="container">
    <ul>
      <li class="brand">Donor</li>
      <div class="menu">
        <li><a href="#" class="navlink"> Home </a></li>
        <li><a href="#" class="navlink"> Donate</a></li>
        <li><a href="#" class="navlink"> Gallery</a></li>
        <li><a href="#" class="navlink"> Blog</a></li>
        <li><a href="#" class="navlink"> About</a></li>
        <li><a href="#" class="navlink"> Contact</a></li>
      </div>
    </ul>

  </div>
</div>
<div class="content"></div>

**

Answer 1

看起来您可能只是打错字了：

$('.navba , a:visited').removeClass('color-change');

但是，撤消更改的更直接方法是直接定位已更改的元素：

$('.color-change').removeClass('color-change');

$(window).scroll(function() {
  if ($(document).scrollTop() > 600) {
    $('.navbar , a:link ').addClass('color-change');
  } else {
    $('.color-change').removeClass('color-change');
  };
});

.navbar {
  position: fixed;
  width: 100%;
  height: 70px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  color: white;
  background-color: blue;
  margin: auto;
  margin-top: 10px;
  padding-top: 30px;
  z-index: 9000;
}

.navbar.color-change {
  background-color: white;
  height: 60px;
  color: black;
  margin: auto;
  padding-top: 20px;
}

a.color-change {
  text-decoration: none;
  color: black;
}


/*make sure the content is tall enough to scroll for this example*/
div.content {
  min-height: 2000px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar">
  <div class="container">
    <ul>
      <li class="brand">Donor</li>
      <div class="menu">
        <li><a href="#" class="navlink"> Home </a></li>
        <li><a href="#" class="navlink"> Donate</a></li>
        <li><a href="#" class="navlink"> Gallery</a></li>
        <li><a href="#" class="navlink"> Blog</a></li>
        <li><a href="#" class="navlink"> About</a></li>
        <li><a href="#" class="navlink"> Contact</a></li>
      </div>
    </ul>

  </div>
</div>
<div class="content"></div>

Answer 2

您缺少导航栏拼写，请更正它，请参考下面的代码，它将对您有所帮助（我已经更新了您的代码）。

$(window).scroll(function() {
  if ($(document).scrollTop() > 600) {
    $('.navbar , a:link ').addClass('color-change');
  } else {
    $('.navbar , a:visited').removeClass('color-change');
  };
  });

.navbar {
  position: fixed;
  width: 100%;
  height: 70px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  color:white;
  background-color: blue ;
  margin:auto;
  margin-top:10px;
  padding-top:30px;
  z-index: 9000;
}
.navbar.color-change {
  background-color: white;
  height: 60px;
  color:black;
  margin:auto;
  padding-top:20px;
}
 a.color-change {
   text-decoration: none;
   color:black;
 }
 
 .max-height{
 height : 100em;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar">
<div class="container">
  <ul>
  	<li class ="brand">Donor</li>
  	<div class="menu">
  	<li><a href="#" class="navlink"> Home </a></li>
  	<li><a href="#" class="navlink"> Donate</a></li>
  	<li><a href="#" class="navlink"> Gallery</a></li>
  	<li><a href="#" class="navlink"> Blog</a></li>
  	<li><a href="#" class="navlink"> About</a></li>
  	<li><a href="#" class="navlink"> Contact</a></li>
    </div>
  </ul>

</div>
</div>


<div class="max-height"> </div>