JS/jQuery

Блок, фиксированный при прокрутке

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

Метод основан на свойстве CSS - position: fixed. Div с классом fixed-box нужен для того чтобы блоки которые следуют за ним не прыгали, он должен быть с фиксированной высотой.

<div class="fixed-box">
    <div class="fixed-div">
        Код меню или баннера...
    </div>
</div>
$(document).ready(function($) {
    $nav = $('.fixed-div');
    $nav.css('width', $nav.outerWidth());
    $window = $(window);
    $h = $nav.offset().top;
    $window.scroll(function() {
        if ($window.scrollTop() > $h) {
            $nav.addClass('fixed');
        } else {
            $nav.removeClass('fixed');
        }
    });
});
.fixed-box {
    height: 60px;
}
.fixed-div {
    height: 60px;
}
.fixed {
    position: fixed;
    z-index: 9999;
    top: 0;
}

Пример для меню

Пример для баннера

Вариант на Bootstrap affix

В Bootstrap реализован плагин affix - http://getbootstrap.com/javascript/#affix

Включить его можно добавив атрибуты к тегу:

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
    Код баннера...
</div>

Или через JS:

<div id="myAffix">
    Код баннера...
</div>

<script>
$(document).ready(function($){
    $('#myAffix').affix({
        offset: {
            top: 60,
            bottom: 60
        }
    });
});
</script>

13 января 2017