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

.wrapper {
  width: 90%;

  margin: 0 auto;
  background-color: #fff;
  padding-top: 50px;
}

.topNav {
  height : 50px;
  width: 100vw;

  position: absolute;
  left: 0;
  top: 0;
  background-color: #e85252;
}

После этого ul всё равно не даст .topNav встать в верхнюю точку, поэтому поработайте ещё с ним:

ul {
  padding: 0;
  margin: 0;
}

Если вы хотите изучить gulp, то вот.
А если вам нужно заюзать sass-препроцессор, то вот.

В кратце:
Чтобы изменить css-код через sass-препроцессор нужно:
1. Запустить gulp (Открой командную строку в папке /node_modules/.bin в папке с проектом, затем введи команду gulp).
2. Открыть sass-файл со стилями, внести необходимые изменения.
3 (только с task'ом watch). Перезагрузить страницу.

ЗЫ: Чтобы каждый раз не перезагружать страницу, советую подключить browser-sync (эта штука автоматически делает перезагрузку нужного элемента на странице, а также умеет создавать localhost с сайтом проекта, на который можно зайти со всех устройств в зоне действия wi-fi (если комп подключён к нему по локалке))

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

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

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

Есть ЯП под названием 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
	};
}

У вас используется тег p. У этого элемента по умолчанию отступ со всех сторон. Пропишите для всех параграфов:

p {
margin: 0;
}

+ Обнулите отступы у body таким же образом

Псевдоэлементы :after и :before довольно часто используются в вёрстке для добавления каких-либо элементов перед- и после- объекта. Например, можно с их помощью сделать вот такое меню. И даже вот такие эффекты делаются только лишь при помощи этих псевдоселекторов.

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