JS: Закрепляем блок у верхней границы окна
Задача: блок при прокрутке ведёт себя как обычный элемент, но как только достигнет верхней границы браузера закрепляется.
Для реализации, к блоку, который должен закрепиться, добавим класс, фиксирующий его при помощи position: fixed. Сделаем это, используя jQuery.
В HTML создаем три блока:
<div class="welcome">
Hello!
</div>
<div class="stick_menu">
Menu here
</div>
<div class="third_block">
Content Third block
</div>
В стилях зададим блокам разную высоту и цвета. Закреплять будем .stick_menu, при помощи добавления к нему класса .fixed.
.welcome {
height: 500px;
background-color: #f5f6f6;
}
.stick_menu {
width: 100%;
line-height: 50px;
background-color: #c00;
}
.third_block {
height: 2000px;
background: #f5f6f6;
background: -webkit-linear-gradient(45deg, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
}
.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');
});
});
Пример на CodePen (немного добавил стилей в CSS для украшательства):
See the Pen Закрепляем блок у верхней границы окна by Sergei (@eshill) on CodePen.