Прилипание блоков

Фиксирование заголовка вверху реализуется легко. Достаточно разместить скроллируемую область под заголовком, тогда заголовок всегда останется на месте, над скроллируемым контентом.

Рис. 1. Фиксированная шапка списка диалогов на online.sbis.ru.

Однако такое решение не всегда применимо.

Например, необходимо фиксировать часть цельного контрола, который невозможно разделить на фиксированный заголовок и скроллируемый контент. К таким случаям можно отнести шапку таблицы Controls/grid:View или хлебные крошки в Controls/explorer:View.

Еще один пример. Скроллируемый контент содержит заголовки (так назовем часть контента, необходимую для фиксации), которые изначально находятся ниже, и должны быть зафиксированы при доскроллировании до них.
Примером может послужить панель Центра Уведомлений. Эта панель широко используется для оперативного реагирования, может содержать достаточно много информационных разделов. При скроллировании вниз заголовок текущего раздела отображается в шапке панели.

Рис. 2. Отображение заголовков на панели уведомлений на online.sbis.ru. При скроллировании вниз в шапке панели последовательно отображаются названия текущих разделов: Новости -> Задачи -> Обсуждения.

Заголовки этих разделов могут быть настроены как прилипающие.

Документация API Спецификация Axure

Руководство разработчика

Рассмотрим настройку фиксации (прилипания) заголовка на примере контента:

Рис. 3. Контент, содержащий несколько заголовков, для иллюстрации работы механизма прилипания.

Необходимо зафиксировать заголовки First Header, Second Header и Next Header. Все они расположены ниже верхнего края скроллируемой области. При скроллировании вниз заголовки будут передвигаться вверх, и при достижении верхней границы должны быть зафиксированы у верхнего края области.

То есть, в результате скроллирования ожидается получение контента следующего вида:

Рис. 4. Результат скроллирования контента с прилипающими заголовками.

Фиксация реализуется с помощью свойства CSS position: position: sticky.
Поддерживается современными браузерами. Internet Explorer не поддерживает это свойство.

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

Скроллируемый контент помещается в контейнер Controls/scroll:Container.

Контент содержит пять заголовков. Каждый заголовок (с учётом его возможной фиксации) помещаем в контрол Controls/scroll:StickyHeader. Для заголовков, которые нужно зафиксировать, опции mode устанавливается значение stackable:

<Controls.scroll:Container>
   <div>
      <p>
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
      </p>
      <Controls.scroll:StickyHeader mode="stackable">
         <div>First Header</div>
      </Controls.scroll:StickyHeader>
      <p>
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
      </p>
      <Controls.scroll:StickyHeader mode="stackable">
         <div>Second Header</div>
      </Controls.scroll:StickyHeader>
      <p>
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
      </p>
      <Controls.scroll:StickyHeader>
         <div>Other header. Lorem ipsum dolor sit amet..</div>
      </Controls.scroll:StickyHeader>
      <p>
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
      </p>
      <Controls.scroll:StickyHeader mode="stackable">
         <div>Next header</div>
      </Controls.scroll:StickyHeader>
      <p>
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
      </p>
      <Controls.scroll:StickyHeader>
         <div>Last header</div>
      </Controls.scroll:StickyHeader>
      <p>
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
      </p>
   </div>
</Controls.scroll:Container>

Таким образом, для заголовков будет активирован механизм прилипания.

Как работает прилипание заголовков

При скроллировании вниз первый заголовок First Header, поднявшись к верхнему краю контейнера, "прилипнет" к нему, скроллирование будет продолжено для контента, расположенного ниже заголовка.



Следующий заголовок Second Header "прилипнет" к нижнему краю заголовка First Header.



Следующий заголовок, Other header, "прилипнет" к краю заголовка Second Header.



Поскольку для этого заголовка значение опции mode — по умолчанию, replaceable, при дальнейшем скроллировании контента такой заголовок будет заменён на следующий прилипающий заголовок, Next Header.



Дальнейшее скроллирование даст ожидаемый результат (см. рис.4).

Опции фиксации (прилипания) заголовков

shadowVisibility — определяет отображение тени на границе прилипающего заголовка; возможные значения: visible | hidden; на изображении ниже (см. рис.5) — заголовок First Header с shadowVisibility = visible и заголовок Second Header с shadowVisibility = hidden:

Рис. 5. Отображение прилипающего заголовка с тенью (First Header) и без тени (Second Header).


mode — определяет режим отображения заголовка;

  • stackable — при скроллировании заголовок прилипает к краю контейнера или предыдущего заголовка;
  • replaceable — (по умолчанию) при скроллировании заголовок прилипает к краю контейнера (предыдущего заголовка), но при дальнейшем скроллировании контента будет заменен на следующий прилипающий заголовок (см. рис. 6);

Рис. 6. Заголовок Next Header заменяется заголовком Last Header при скроллировании вниз.


position — позиция прилипания; возможные значения: top | bottom | topbottom; например, для заголовка Last Header установлена позиция bottom; такой заголовок с начала скроллирования будет прикреплен к нижнему краю, до тех пор, пока не будет скроллироваться контент, расположенный ниже заголовка.

Рис. 7. Заголовок Last Header зафиксирован у нижнего края контейнера.