Как сделать чтобы при прокрутке элемент изменялся
 

Привет! У меня есть меню, которая находится сверху сайте. Оно зафиксировано. Я хочу чтобы при прокрутке цвет текста и фон изменялся, а если элемент вновь находится вверху то все делалось обратно. Желательно с комментариями. Заранее спасибо!

<div class="menu"></div>

.menu.fixed {
    left: 0;
    position: fixed;
    top: 0;
}

var menu = document.querySelector('.menu');
var menuIsFixed = false;
var top = 100; //При какой позиции фиксировать

window.addEventListener('scroll', function() {
	if(window.pageYOffset > top !== navMenuIsFixed) {
		menuIsFixed = !menuIsFixed;
		menu.classList[menuIsFixed ? 'add' : 'remove']('fixed');
	}
});

8 строчка мне не понятна, как и последняя

А так?

if (menuIsFixed) {
	menu.classList.add('fixed');
} else {
	menu.classList.remove('fixed');
}

спасибо
но чето не работает(

Zombie_Killer, вероятно работает, просто вы от него не того ждете.
Код, что ruslan_mart написал не решает вашей задачи.
Он при скролле страницы добавляет элементу с классом "menu" класс "fixed", если пользователь проскроллил от 100 и больше пикселей и удаляет этот класс, если пользователь вернулся в начало страницы.
Чтобы при каждом скролле не добавлять/удалять класс у элемента была использована переменная, которая хранит состояние наличия класса "fixed" у ".menu".

Тут ведь только изменить декларации в цсс классе на нужные и переменной top подходящий брейкпоинт. Любой класс туглить.

.is-color {
  color: black;
  background-color: orange;      
}

Можно ещё вот так:

menu.classList.toggle('fixed', menuIsFixed);

Но это решение меньше поддерживается браузерами :)

Вы абсолютно правы. Этот кусок кода я писал очень давно, просто скопировал и вставил сюда. Но суть, как подчеркнул Rasy, та же. Нужно просто поменять стили/класс под себя.