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.

Поделиться
Отправить
Ваш комментарий
адрес не будет опубликован

ХТМЛ не работает

Ctrl + Enter
Популярное