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

Казалось бы — ну и что с того? Ведь посетители все равно административной панели не видят, а редакторы как-нибудь перетопчутся... и вот тут капитан Салерман встает могучей грудью на защиту тружеников мышки и контента:
Хватит это терпеть!
Оговоримся, ниже речь пойдет о панели Битрикса, прилипающей к верху экрана при скролле (что очень удобно). В случае, если заранее не озаботиться взаимодействием панели и «липким» меню, редакторы будут лицезреть примерно следующую картину:
1. Панель Битрикса победила и перекрывает главное меню сайта
Стоит проскроллить немного вниз, и главное меню прилипнет к адресной строке, перекрыв кнопки управления панелью:
2. На этот раз главное меню забороло раскрытую панель, нагло устроившись сверху
Еще хуже, если панель свернута в строку — в этом случае мы рискуем остаться вовсе без управления сайтом:
3. Свернутая панель в верхнем положении выглядит вполне невинно
Начинаем скроллить, и:
4. SURPRISE! Главное меню полностью похоронило панель под собой
Помимо указанной проблемы, часто встречается банальная недоработка самой «липкой шапки». Опытные разработчики и дизайнеры (которые следят за тем, как внедряются их детища) знают, что после «прилипания» шапки блок, который она занимала ранее, становится пустым. Из-за этого контент смещается вверх, благополучно занимая её прежнее место.

Таким образом, происходит следующий казус: пользователь скроллит до заголовка, в этот момент прилипает шапка — и заголовок, который он хотел прочитать, вдруг оказывается под «липкой шапкой». Epic fail.

Также мало кто учитывает смещение позиции срабатывания «липкой шапки» при появлении над ней динамических элементов, например, все той же панели управления Битрикс. В итоге для простого посетителя сайта все выглядит хорошо и плавно, а для редактора поведение «липкой шапки» становится ужасно дерганым:
Давайте сделаем так, чтобы панель Битрикса и главное меню сайта больше не рвали друг другу патлы в борьбе за верхние 39 пикселей редакторского браузера.
Лечим шапку
Учитывая все вышеперечисленное, обозначим 4 состояния, которые необходимо обработать программисту:

1. Панель развернута и не прилеплена — тут необходимо учесть область, которую занимает развернутая панель управления в координате срабатывания липкой шапки;
2. Панель свернута и не прилеплена — то же, что и в предыдущем пункте, только размер панели управления меньше;
3. Панель развернута и прилеплена — в этом случае учитываем не только координату старта срабатывания липкой шапки, но и координату области в видимой части экрана, к которой шапка, собственно, «прилипнет». И место это вполне закономерно должно располагаться под панелью управления;
4. Панель свернута и прилеплена — тут также надо учитывать эти две координаты (срабатывания и прилипания), только обе они зависят от уменьшенного размера свернутой панели.

Кроме того, необходимо учесть динамический переход из состояния в состояние. Для устранения проблемы мы сделали правильную обработку всех 4-х случаев стандартом при разработке «липкой шапки» и получили следующий результат:
Следует помнить, что все fixed-блоки сайта должны корректно взаимодействовать между собой с учетом наличия панели управления CMS.
Для ботанов: практическая реализация
Разберем практический пример с использованием штатного affix-плагина bootstrap версии 3.3.7. В итоге, 75 строк javascript-кода делают работу редакторов гладкой и комфортной, без заноз.
Хочешь исходник? Расшарь статью в свою любимую соцсеть и пришли ссылку на пост вместе с запросом мне на мыло max@salerman.ru
Максим Макаров
Технический директор