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

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

Для начала создадим разметку:

<div class="welcome">
 Hello!
</div>

<div class="stick_menu">
 Menu here
</div>

<div class="third_block">
 Content Third block
</div>

Далее доьавим по вкусу раши стили, по сути из всей моей писаныны вам понадобится только класс .fixed который мы при помощи JS будем присваивать блоку по достижении верхней границы окна браузера:

.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;
}

Ну и наконец создаём JS который следит за скролом и в нужный момент задаёт нашему элементу класс .fixed:

$(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');
 });
});

See the Pen Закрепляем блок у верхней границы окна by mbogrov (@mbogrov) on CodePen.