Как закрепить меню или другой модуль 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;
}

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

 

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

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

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;
}

Видео