У меня проблема с изменением цвета ссылок меню при прокрутке

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

у вас нет орфографии navbar, пожалуйста, исправьте ее, пожалуйста, обратитесь к приведенному ниже коду, это поможет вам (я обновил ваш код).

$(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>

Answer 2

Похоже, что вы можете просто опечатка на линии:

$('.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>