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