Ростислав Сергеевич

Смотря где учить.

Здесь в конце каждой главы есть отличные задачки для закрепления.

JavaScript здесь необязательно использовать. Вполне достаточно media queries

Вот так будет выглядеть код, который нужно вставить в конец вашего файла со стилями:

@media (max-width: 768px) {
	.element { // Селектор вашего элемента
		top: 0;
	}
}

Берёте индекс активного слайда (0, 1, 2, 3) из массива таковых, затем ставите конструкцию switch(можно много if, но это будет выглядеть не эстетично), и, согласно тому, какой слайд активен, меняете цвет текста. Естественно, это всё нужно положить в setTimeot, время в котором выставляете аналогичное интервалу смены слайдов.

ЗЫ: Если не поняли, могу накидать код.

UPD (Накидал код):

var element = document.querySelector('.element'); // Элемент, для которого и будем менять цвет в соответствии с активным слайдом (таких элементов может быть неограниченное количество)

setTimeout(function() {
	var slide = document.querySelector('.slide.active'); // Поиск активного слайда по классу .active

	if (slide.classList.contains('black')) {
		element.classList.remove('black'); // Удаляем класс чёрного цвета для элемента
		element.classList.add('white'); // Добавляем класс белого цвета для элемента
	} else {
			element.classList.remove('white');
			element.classList.add('black');
		}
}, 1000); // Вместо "1000" нужно указать интервал смены слайдов

Оказывается, массив и конструкция switch здесь совсем не нужны.

Есть ЯП под названием JavaScript. Так вот, он обладает абсолютно всеми возможностями, необходимыми для реализации вашей задачи. Может быть вы хотите, чтобы кто-то за вас написал код? - Думаю, вряд ли кто-то станет это делать.

ЗЫ: Почему так сложно загуглить?

UPD: Накидал код:

var navigation = document.querySelector('.nav'); // Инициализируем блок навигации

document.onscroll = function() {
	if (document.scrollTop >= navigation.offsetHeight) { // Если началась прокрутка, то...
		navigation.classList.add('stick'); // Добавляем класс со стилем со свойством position: fixed
		navigation.classList.remove('static'); // Удаляем класс со стилем со свойством position: static
	} else { // Иначе...
		navigation.classList.add('static'); // Добавляем класс со стилем со свойством position: fixed
		navigation.classList.remove('fixed'); // Удаляем класс со стилем со свойством position: static
	};

	if (document.scrollTop == document.body.offsetHeight - document.body.clientHeight) { // Если дошли до низа, то...
		navigation.classList.add('hidden'); // Добавляем класс со стилем со свойством display: none
	} else { // Иначе...
		navigation.classList.remove('hidden'); // Удаляем класс со стилем со свойством display: none
	};
}

if (!localStorage.getItem('item')) {
  alert('В следующий раз этого окна не будет');
  localStorage.setItem('item', true);
}