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

Зачем это надо?

«Залипание» элементов на веб-странице при прокрутке используется для улучшения юзабилити. Чаще всего мы можем видеть залипание таких элементов, как:

  • Главное меню, закреплённое вверху страницы (как на этом сайте).
  • Навигацию по странице (оглавление), закреплённую в сайдбаре (как на этом сайте).
  • Также можно столкнуться с другими примерами, например, с залипанием заголовков разделов и т. д.

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

Способы реализации

Ранее для закрепления элементов приходилось применять JavaScript, однако на момент создания данного материала достаточно грамотно применить CSS.

Необходимые CSS-свойства

Чтобы закрепить элемент в самом вверху страницы, достаточно добавить его HTML-тегу следующие CSS-свойства:

  • position: sticky;
  • top: 0;
  • z-index: 1000
Учтите
Модуль будет закреплён только в пределах родительского контейнера, например сайдбара, и не будет выходить за его пределы.

Применение Bootstrap 5

В Bootstrap 5, который использует Cassiopeia (нативный шаблон Joomla 4), а также большинство современных шаблонов (например, все шаблоны от Joomshaper), существует предопределённый CSS-класс sticky-top, который по умолчанию использует следующие CSS-свойства:

.sticky-top{
position: -webkit-sticky;
position: sticky; top: 0; z-index: 1020;
}

Т. е. можно просто добавлять данный класс к модулю в его настройках.

Примите к сведению
Если необходимо, чтобы модуль «залипал» не в самом верху страницы, то следует изменить значение свойства top на необходимое (например, top: 90px;).

Подводные камни

Есть ряд причин, из-за которых «залипание» может не работать:

  1. Не указаны все необходимые CSS-свойства. 
    Помните, что свойства position: sticky; не достаточно, также необходимо свойство top, которое будет задавать расстояние залипания.
  2. Пространство родительского элемента ограничено его содержанием. 
    Напоминаем, что закрепленный модуль не может выходить за пределы родительского тега. В этом случае попробуйте увеличить высоту родителя.
  3. У одного из родительских тегов имеется полоса прокрутки. 
    В этом случае необходимо исключить полосу прокрутки. Найдите проблемный тег и пропишите ему CSS-свойство overflow: unset;

Как закрепить верхнее меню в Joomla?

В большом количество случаев нет необходимости фиксировать меню или шапку сайта, работающего на CMS Joomla, с помощью кастомизации кода. Например, в шаблоне Cassiopeia, который идёт с Joomla 4 по умолчанию, предусмотрена настройка Липкая шапка, которая добавляет меню CSS-класс sticky-top. Также аналогичная настройка имеется среди опций большинства профессиональных шаблонов, но большинство из них используют JavaScript для закрепления меню.

Автоматическое добавление CSS-класса

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

  1. Добавить каждому последнему модулю в сайдбаре нужный CSS-класс в настройках. 
  2. Добавить JS-скрипт, который будет добавлять нужный класс модулям автоматически.
  3. Добавить CSS-правила для последнего модуля.

Здесь оптимальным решением будет 3-й вариант. Например, фиксироваться должен тег с классом .sp-module, у которого родительским является .sp-column. В таком случае закреплять последний модуль в сайдбаре на каждой странице позволит следующий CSS-код:

.sp-column .sp-module:last-child{
position: -webkit-sticky; position: sticky; top: 0; z-index: 1020;
}
Напоминаем
Значение свойств top или z-index могут быть иными при необходимости.

Видео

Упоминаемые термины:

CSS, Joomla, Шаблон, CMS, JavaScript, Cassiopeia, Bootstrap