GRAVITSAPA.INFO

Компьютеры, электроника, софт, авто, мото, вело, сайты, жизнь, советы :)

GRAVITSAPA.info - интересный блог

Фиксируем блок на определённой позиции при прокрутке с помощью jQuery

1571 просмотров Создание сайтов 1 коммент » 17 Янв 2019

В этом примере рассмотрим фиксацию блока при прокрутке и прилипание к верху экрана. DEMO можно увидеть перейдя СЮДА в песочницу.

Как видим реализовано всё просто.
Пример HTML структуры. Не зависимо от содержимого, будь то меню, или просто блок с текстом, нужно обернуть содержимое в два div блока. Так исключаем проблему с дёрганьем во время фиксации блока.
<div class="super-block">
<div class="mega-block">
Этот блок должен прилипнуть когда доскроллится до верха экрана.
</div>
</div>

Затем вот такие CSS стили. Видно, что для фиксации используется вполне логичный стиль position: fixed.
.super-block {
height: 50px;
}
.mega-block {
background: gray;
text-align: center;
height: 50px;
line-height: 50px;
}
.topchik {
position: fixed;
left: 0;
right: 0;
top: 0; /*этот стиль лепит наш блок к верху, если нужно фиксировать в другом расположении, то меняем этот стиль, а так же left и right*/
z-index: 1;
}

И главный герой работы фиксации блока при скролле — это скрипт на jQuery, который разместим между <head></head>. В скрипте видно, что класс мы меняем второму div — это так же нужно, для избежания проблем с прыжками блока во время фиксации.
<script>
jQuery(document).ready(function($){
var $window=$(window),
$target=$(".mega-block"),
$h=$target.offset().top;
$window.on('scroll',function(){
var scrollTop=window.pageYOffset||document.documentElement.scrollTop;
if(scrollTop>$h){
$target.addClass("topchik");
return;
}else{
$target.removeClass("topchik");
}
return;
});
});
</script>

Пишите комменты и делитесь статьёй в соц. сетях, нажав соответствующую кнопку ниже 😉 Спасибо!

Оставь свой коммент

1 коммент к посту “ Фиксируем блок на определённой позиции при прокрутке с помощью jQuery”:

  1. Прыгает / дёргается position: fixed при скроллинге - решение проблемы

    […] Готовое решение рабочей фиксации блока при скролле страницы можно найти в ЭТОЙ СТАТЬЕ. […]

NIGHT
Наверх