Если вы хотите изучить 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;
	}
}

div

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

Работайте над собой. Люди не рождаются усидчивыми. Их делает таковыми жизнь.
Сядьте и поставьте цель: не вставать со стула и не отвлекаться ни при каком условии, пока не завершу проект. Мне это очень помогает