Крепим шапку к верху с анимацией

Крепим шапку сайта при скролле к верху браузера с анимацией и возможностью кастомизации под свои нужды, без плагинов и прочего.

Код шапки выглядит так:

<div class="header">
  <header></header>
</div>

Подключаем js (подрузамеваем что уже создан свой файл для js, например main.js и мы знаем про существование https://cdnjs.com/)

Подключаем animate.css

Смотрим нужную нам анимацию http://daneden.github.io/animate.css/

Открываем наш main.js и пишем код:

/*Stick Header*/
$(window).scroll(function() {
  if ($(this).scrollTop() > 1) {  
    $('.header').addClass("sticky");
    $('.header header').addClass("animated fadeInDown");
  } else {
    $('.header').removeClass("sticky");
    $('.header header').removeClass("animated fadeInDown");
  }
}

Объяснять что и как я думаю нет смысла и так все понятно.

Открываем файл стилей и добавляем:

.header header {
  padding: 10px 0px;
  background: #fff;
  color:#000;
}
.header.sticky {
  width: 100%;
  position: fixed;
  top: 0px;
  z-index: 100;
}
.header.sticky header {
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
}

Остальное по вкусу.