Скрытие хедера при скроллинге

Собственно, для реализации скрытия хедера был заиспользован JS.
Для этого стоит убедиться, что в макете в HTML указан класс header, например так:

<div class="header">
    //тут что-то есть
</div>

В css ищем и находим соответствую секцию, куда дописываем, допустим, "transition: all .3s ease;" и добавляем секцию .header .out примерно так:

.header {
  тут;
  уже;
  были;
  какие-то;
  параметры;
  transition: all .3s ease;
}
.header.out {
  transform: translateY(-100%);
}

Ну и, добавляем соль и сахар по вкусу немножко JS:

var header = $('.header'),
		scrollPrev = 0;

$(window).scroll(function() {
	var scrolled = $(window).scrollTop();
 
	if ( scrolled > 100 && scrolled > scrollPrev ) {
		header.addClass('out');
	} else {
		header.removeClass('out');
	}
	scrollPrev = scrolled;
});

Убедитесь также, что у вас подключена jquery.

Результат на скринах ниже: