JQUERY ПЛАГИН ФИКСИРУЮЩЕГОСЯ ЛИПКОГО БЛОКА

[anonymous]

В этом топике я расскажу о том, почему мы решили написать свой плагин для создания липких блоков, и почему масса других не подошла, с какими проблемами столкнулись при разработке, какие проблемы решили, а какие нет. Итак. К вашему вниманию бесплатный jQuery плагин липких фиксирующихся блоков в сайдбаре при прокрутке страницы под названием Air Sticky Block.

Какая была задача?
Внизу одной из колонок сайта находился баннер. Он был в самом низу сайдбара, а над ним еще очень много блоков различной высоты. При этом, высота этих блоков была абсолютно разной на каждой странице сайта. Нам требовалось сделать так, чтобы докручивая страницу до баннера, он бы фиксировался, то есть позиция блока менялась на position: fixed;.Таким образом, блок должен прилипать к верхней части страницы и быть всегда на виду у посетителя. После того, как пользователь докручивает до футера, блок должен останавливаться и уходить за пределы рабочей области монитора вместе с сайдбаром. То есть, требуется повторная смена позиционирования при достижении определенной точки сайта.

Почему другие jQuery плагины липких блоков не подошли?
Задача, на первый взгляд, казалась довольно простой и не требовала особых усилий. Но это лишь на первый взгляд. Начав тестировать плагины других разработчиков, стало понятно, что нужно будет попотеть.
Чтобы не растягивать статью, сразу приведу список того, что не устроило в десятках протестированных jQuery плагинов липких блоков:

• Многие плагины не видят финишной точки. То есть, докручивая до футера, блок остается фиксированным и просто “наезжает” на футер. Такая реализация плагина имеет место быть, но она не выполняет наших задач.
• Ряд плагинов работает корректно только тогда, когда блок, который должен прилипать, находится в абсолютном позиционировании, т.е. всегда в одной и той же позиции в колонке.
• В момент, когда все колонки сайта перестраивались одна под другой, все ломалось.

Недостатков можно перечислить много, наверняка они найдутся и в нашем плагине, но все же основным оказалось то, что все готовые решения, рассмотренные нами, не были предназначены для адаптивных сайтов.

Что в итоге получилось и какие преимущества Air Sticky Block?
Спустя некоторое время, плагин для фиксации div блока в сайдбаре был написан. При разработке всплывало много “подводных камней”, о которых мы и подумать не могли, когда начинали разработку. В итоге получился довольно хороший скрипт, более продуманный и универсальный по сравнению с подобными разработками наших коллег.

Преимущества нашего плагина Air Sticky Block

• Корректно работает во всех разрешениях и сетках, вам не придется скрывать блок из-за того, что все сломалось после перестройки блоков,
• Реагирует на изменение ориентации устройства,
• Реагирует на изменения размеров рабочей области браузера;

Что плагин пока не умеет делать?
В планах было реализовать появление вертикальной прокрутки внутри липкого блока, если его высота превышает высоту рабочей области в момент фиксации, но при оценке приоритетов и функций, возлагаемых на плагин, от этого функционала было принято решение отказаться и оставить его на доработки к релизу новых версий.
Кстати, пишите в комментариях, если считаете этот функционал жизненно необходимым для этого плагина и он обязательно будет включен в следующую версию.

Установка и настройка плагина
Здесь все просто и стандартно, за исключением одного маленького нюанса, активировать плагин мы будем только после полной загрузки страницы, включая картинки. Если этого не сделать, плагин загружается и осуществляет все расчеты раньше, чем подгружаются картинки, которые после загрузки изменяют высоту своих родителей. В связи с этой особенностью, расчеты нашего плагина оказываются неверными, и липкий фиксированный блок работает некорректно.

1. Подключение файлов
Добавьте эти файлы перед закрывающимся тегом . Это подключит библиотеку jQuery и основные JS файлы Air Sticky Block

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../jquery.airStickyBlock.min.js"></script>

2. Добавление разметки
Разметка Air Sticky Block очень проста и полностью совместима с разметкой Bootstrap. Вам не придется модифицировать ваш код или что-то дорабатывать в нем, необходимо всего лишь добавить два класса:

1. Класс airSticky_stop-block необходимо добавить контейнеру, в котором находится ваша сетка div class=«container» По достижении низа контейнера, липкий блок перестанет быть фиксированным и начнет смещаться со всей страницей.
2. Класс airSticky добавляем к блоку, который находится в одной из колонок сетки и должен фиксироваться.

<div class="container-fluid airSticky_stop-block">
    <div class="row">
        <div class="col-xs-8 col-md-8">
            Ваш контент
        </div>
        <div class="col-xs-4 col-md-4">
            <section class="airSticky">
                Контент липкого блока
            </section>
        </div>
    </div>
</div>

3. Подключение Air Sticky Block
Пришло время активировать наш плагин. Вставьте следующий код перед закрывающимся тегом так, чтобы они были после шага 1

<script>
jQuery(document).ready(function($){
    window.onload = function() {
        $('.airSticky').airStickyBlock();
    };
});
</script>

4. Настройки Air Sticky Block
Настроек у плагина всего лишь две: это включение режима отладки, при котором на экран выводится блок со всеми расчетами, и вторая настройка — это указание класса контейнера, в котором находится сетка.

$('.airSticky').airStickyBlock({
    debug: false, // Режим отладки, по умолчанию false
    stopBlock: '.airSticky_stop-block' // Класса контейнера, в котором находится сетка, по умолчанию .airSticky_stop-block
});

На этом, пожалуй, все. Вашему вниманию был представлен jQuery плагин фиксации «липкого» блока при скроллинге для адаптивных сайтов — Air Sticky Block. Надеюсь, он будет вам полезен.