CSS: Зафиксировать блок при достижении верха окна браузера

Статья объясняет, как реализовать функцию «прилипающего» элемента: зафиксировать в верху страницы какой-либо элемент, как только он достигнет верхнего края окна браузера. После этого элемент ведёт себя обычно при прокрутке вверх.

HTML-разметка

  Hello!



  Menu here



  Content Third block

CSS-стили

.welcome {
  height: 500px;
  background-color: #f5f6f6;
}

.stick_menu {
  width: 100%;
  line-height: 50px;
  background-color: #c00;
}

.third_block {
  height: 2000px;
  background: #f5f6f6;
}

.fixed {
  position: fixed;
  top: 0;
}

JavaScript-реализация

$(document).ready(function() {
  var start_pos = $('.stick_menu').offset().top;
  $(window).scroll(function(){
    if ($(window).scrollTop() >= start_pos) {
      if ($('.stick_menu').hasClass() == false)
        $('.stick_menu').addClass('fixed');
    } else {
      $('.stick_menu').removeClass('fixed');
    }
  });
});

Скрипт отслеживает позицию прокрутки и добавляет класс .fixed при достижении элементом верхней границы окна браузера. При прокрутке вверх класс снимается и элемент возвращается в нормальный поток.