В этом примере рассмотрим фиксацию блока при прокрутке и прилипание к верху экрана. 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>
Пишите комменты и делитесь статьёй в соц. сетях, нажав соответствующую кнопку ниже 😉 Спасибо!