Прилипающая шапка

Пример

<div class="header" id="myHeader">
  <h2>Моя шапка</h2>
</div>

Пример

/* Стили шапки */
.header {
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

/* Контент страницы */
.content {
  padding: 16px;
}

/* Класс sticky добавляется к шапке при помощи JS,
  когда страница прокручивается до нужной позиции */
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

/* Добавляем к контенту страницы верхние отступы,
  чтобы предотвратить неожиданные рывки (из-за того,
  что у шапки задается новая позиция вверху страницы
  (position:fixed и top:0) */
.sticky + .content {
  padding-top: 102px;
}

Пример

// Когда пользователь прокручивает страницу, выполняем myFunction
window.onscroll = function() {myFunction()};

// Получаем шапку
var header = document.getElementById("myHeader");

// Получаем позицию элемента
var sticky = header.offsetTop;

// Добавляем класс sticky, когда шапка достигнет нужной позиции.
// Удаляем класс sticky, когда шапка уйдет с этой позиции.
function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}