Как сделать залипающее меню или другой модуль Joomla?

Липкое меню остаётся перед глазами при прокрутке и помогает переходить по сайту. Таким же способом можно закрепить оглавление или другой модуль Joomla. Разберём настройку шапки Cassiopeia, собственный CSS для модуля и причины, по которым залипание не работает.

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

Для обычного закрепления блока при прокрутке достаточно CSS-свойства position: sticky. Пока элемент не дошёл до заданного отступа, он перемещается вместе со страницей. Затем удерживается у края области прокрутки, но остаётся ограничен своим контейнером.

Это отличается от position: fixed: фиксированный элемент исключается из обычного потока документа. Его положение и свободное место под ним приходится учитывать отдельно. Для модуля в боковой колонке обычно удобнее начать со sticky.

В Joomla нет единого переключателя залипания для всех модулей и шаблонов. Сначала проверьте настройки своего шаблона. Если подходящей опции нет, назначьте модулю CSS-класс и добавьте стили. В примерах ниже используется Cassiopeia, а названия пунктов относятся к Joomla 5 и 6. В стороннем шаблоне расположение настроек и HTML-обёртки могут отличаться.

Как закрепить шапку Cassiopeia

В Cassiopeia предусмотрена настройка Липкая шапка. Она относится ко всему элементу шапки, а не только к одному модулю меню.

1. Откройте Система → Стили сайта в группе Шаблоны.
2. Выберите стиль Cassiopeia, назначенный нужным страницам. Если стилей несколько, учитывайте их привязку к пунктам меню.
3. Перейдите на вкладку Дополнительные параметры.
4. Включите Липкая шапка и сохраните настройки.
5. Откройте длинную страницу сайта и прокрутите её вниз.

В английском интерфейсе параметр называется Sticky Header и находится на вкладке Advanced.

Не делайте шапку слишком высокой. Логотип, дополнительные строки и раскрытое меню могут занимать значительную часть экрана. Если требуется закрепить только навигацию, а остальную шапку оставить прокручиваемой, понадобится отдельное решение с учётом разметки шаблона.

Как закрепить отдельный модуль

Собственный CSS-класс позволяет управлять выбранным модулем независимо от остальных блоков. В примере закрепим короткое меню в боковой колонке и оставим обычную прокрутку на узких экранах.

Назначьте CSS-класс

Откройте Контент → Модули сайта и выберите нужный модуль. Проверьте, что он опубликован, назначен нужным страницам и выводится в существующей позиции шаблона. Для правой колонки Cassiopeia используется позиция sidebar-right.

На вкладке Дополнительные параметры добавьте в поле CSS-класс модуля значение:

sticky-module

Введите имя без точки. Если поле уже содержит классы, сохраните их и добавьте новый через пробел. В английском интерфейсе поле называется Module Class.

Сохраните модуль. Шаблон должен вывести этот класс на HTML-обёртке модуля. Если используется оформление без обёртки или собственный макет, проверьте получившуюся разметку в инструментах разработчика браузера.

Добавьте пользовательские стили

В Cassiopeia собственные правила размещают в user.css. Откройте Система → Шаблоны сайта, перейдите к файлам Cassiopeia и откройте user.css в каталоге css раздела /media/templates/site/cassiopeia. Если файла нет, нажмите Создать файл, укажите имя user, тип .css и выберите этот каталог.

Для стандартной Cassiopeia файл располагается по пути media/templates/site/cassiopeia/css/user.css. Не заменяйте содержимое существующего файла, добавьте правила в конец:

@media (min-width: 992px) {
  .sticky-module {
    position: sticky;
    top: 1rem;
  }
}

Здесь position: sticky задаёт способ позиционирования, а top — отступ от верхнего края области прокрутки. Условие min-width: 992px включает правило только на достаточно широком экране. Это выбранная граница примера, а не обязательное условие CSS.

Сохраните файл и обновите страницу. Если видите прежнее оформление, проверьте загрузку user.css и обновите кэш страницы и стилей.

Свойство z-index для самого залипания не обязательно. Оно понадобится, если нужно изменить порядок наложения блоков. Значение подбирайте относительно слоёв вашего шаблона, чтобы модуль не перекрывал шапку, выпадающее меню или диалоговые окна.

Как оставить место под липкой шапкой

Если шапка уже закреплена, модуль с top: 0 может уходить под неё. В таком случае увеличьте отступ в ранее добавленном правиле:

@media (min-width: 992px) {
  .sticky-module {
    position: sticky;
    top: 96px;
  }
}

Число 96px приведено для примера. Измерьте высоту шапки на своём сайте и добавьте небольшой промежуток. Проверьте несколько ширин окна: перенос пунктов меню на новую строку может увеличить высоту шапки.

Для оглавления проверьте ещё и переходы по якорным ссылкам. Заголовок раздела после перехода должен оставаться видимым ниже шапки. Если это не предусмотрено шаблоном, настройте отступ прокрутки для целевых элементов через scroll-margin-top.

Когда подходит класс Bootstrap

Если шаблон подключает нужные стили Bootstrap 5, вместо своего правила можно применить готовый класс sticky-top. Он закрепляет элемент у верхнего края. Есть и варианты для отдельных ширин, например sticky-lg-top, который в стандартной конфигурации Bootstrap включается от 992 px.

Такой класс указывают в том же поле CSS-класс модуля, без точки. Само наличие Joomla не гарантирует, что сторонний шаблон загружает эти CSS-правила. Проверьте их наличие на странице.

Для отступа под шапкой удобнее собственный класс с нужным top. Не добавляйте одновременно несколько способов закрепления одного блока без необходимости.

Почему модуль не залипает

Проверяйте причину по разметке и вычисленным стилям элемента. Изменение случайных значений высоты или z-index не устраняет все возможные ограничения.

1. Правило не применяется. Убедитесь, что класс появился на нужной обёртке, файл CSS загружен и другое правило не переопределило position или top.
2. Не задан отступ. Для залипания сверху используйте top со значением, отличным от auto. Одного position: sticky для такого поведения недостаточно.
3. Нет места для перемещения. Если обёртка заканчивается сразу за модулем, ему некуда сдвигаться. Проверьте высоту колонки и промежуточные контейнеры. Не задавайте произвольную огромную высоту только ради эффекта.
4. Прокрутку задаёт другой контейнер. Значения overflow: auto, scroll и даже hidden у предка могут изменить область, относительно которой работает sticky. Проверьте обе оси, overflow-x и overflow-y. Не заменяйте их повсюду на unset: это может нарушить обрезку содержимого и работу других блоков.
5. Элемент растянут по высоте. В сетке или flex-контейнере модуль может занять всё доступное пространство. Проверьте растягивание именно закрепляемого элемента. Изменение выравнивания должно оставлять колонке достаточную высоту.
6. Модуль слишком высокий. Если он не помещается в экран с учётом верхнего отступа, часть ссылок может оказаться недоступной при ожидаемом сценарии прокрутки. Сократите содержимое или отключите залипание для таких размеров окна.

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

Как закреплять последний модуль колонки

Если в одной позиции Joomla состав модулей меняется от страницы к странице, можно выбирать последний блок CSS-селектором. Для стандартной правой колонки Cassiopeia с оформлением модулей card пример выглядит так:

@media (min-width: 992px) {
  .container-sidebar-right > .sidebar-right:last-child {
    position: sticky;
    top: 1rem;
  }
}

Селектор ограничен правой колонкой. Знак > выбирает непосредственный дочерний элемент, а :last-child требует, чтобы он был последним элементом среди соседей. Если шаблон добавляет дополнительную обёртку или другой блок в конец колонки, селектор потребуется изменить.

Этот способ не добавляет CSS-класс автоматически, а напрямую применяет стили к подходящему элементу. Для одного определённого модуля проще и надёжнее назначить собственный класс в его настройках.

Что проверить в результате

Прокрутите страницу от начала до подвала и обратно. Убедитесь, что модуль начинает залипать у нужного отступа, остаётся в пределах колонки и не перекрывает шапку. Проверьте короткую страницу, мобильный экран, переходы по ссылкам и доступность всех пунктов меню.

Для шапки Joomla-сайта на Cassiopeia начните со встроенной настройки. Для отдельного модуля используйте собственный класс и несколько строк CSS. Если залипание не срабатывает, сначала проверьте контейнеры, отступ и высоту блока, затем корректируйте оформление.