Настройка фиксированных элементов

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

Как активировать фиксацию элементов и задать отступы в CMS Smart Engine

Шаг #1. Кликните по нужному элементу в визуальном редакторе.

Шаг #2. На появившейся панели настроек нажмите кнопку «Зафиксировать элемент».

Шаг #3. В модальном окне с настройками поставьте галочку «Зафиксировать» — это включит режим фиксации для элемента. Без этой отметки остальные настройки не применяются.

Важно! Для мобильной версии можно отдельно настроить отключение функционала.

Шаг #4. В поле «Отступ сверху» укажите значение в пикселях — это безопасный отступ от верхнего края окна браузера. Он нужен, чтобы зафиксированный элемент не перекрывал шапку сайта или другие важные блоки.

Шаг #5. В поле «Отступ снизу» укажите значение в пикселях — это отступ от низа страницы или от ограничивающего элемента (шаг #6).

Шаг #6. При необходимости в том же окне укажите «Идентификатор ограничителя фиксации», предварительно указав его для элемента-ограничителя в поле «Идентификатор (id)» в панели настроек атрибутов (подробнее — в статье «Настройка атрибутов в визуальной среде»). В примере мы указали у элемента «Разделитель» (серая линия над блоком «Описание») значение gray-line в поле «Идентификатор (id)».

Внимание! Если «Идентификатор ограничителя фиксации» не задан, система будет ориентироваться на общую высоту страницы. В этом случае значение «Отступ снизу» особенно важно: оно гарантирует, что элемент не окажется под футером или за пределами видимой области.

Шаг #7. Нажмите «Сохранить», чтобы применить настройки.

Примеры работы

Пример #1. Зафиксирована группа элементов «Блок покупки» с отступом от верха 30px, от низа 60px. В качестве элемента ограничителя фиксации указан «Разделитель».

Поздравляем, вы настроили фиксированный элемент и задали безопасные отступы — теперь он будет корректно отображаться при прокрутке!

Внимание! Функционал фиксированных элементов не совместим с анимациями.