Как закрепить шапку в тильде при прокрутке
Перейти к содержимому

Как закрепить шапку в тильде при прокрутке

  • автор:

Фиксация Zero block при скролле

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

Как зафиксировать Zero block сверху

  1. Укажи в настройках id блока, который нужно зафиксировать.
  2. Скопируй этот код и вставь на свой сайт. Памятка по вставке кода.

Как сделать «шапку» (header, хедер) сайта?

Чтобы разместить блок сразу на всех страницах сайта (например, меню) нужно создать отдельную страницу, поместить на нее элементы, которые должны быть на всех страницах, перейти в Настройки сайта → Шапка и подвал и назначить созданную страницу, как шапку. Этот блок появится вверху на всех страницах сайта.

Чтобы хедер стал виден, опубликуйте все страницы (а не только страницу, назначенную как хедер)

Похожие вопросы
  • Как добавить фавикон (favicon, иконку в браузере)?
  • Как добавить HTML-код в Head сайта?
  • Как создать сайт на нескольких языках?
  • Как добавить еще одну страницу на сайт?
  • Как скопировать страницу?

Просим обратить внимание: техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода

С помощью модификации вы сможете зафиксировать блок сверху или снизу экрана при скролле и заставить отлипнуть в нужном месте. Работает как с блоками из библиотеки, так и с Zero Block.

Модификация: прилипание блока

За модификацию спасибо Дмитрию и Эдуарду
Блок фиксируется в верхней части экрана после того, как пользователь доскроллит до нужного места

Фиксация сверху без отлипания

1) Добавьте в нужном месте блок, который будет прилипать к верхней части экрана.
2) Добавьте код #1 в блок Т123 из категории «Другое».
3) Замените в коде id прилипающего блока. Id можно найти в самом низу настроек блока. Формат — #rec135372713.

  /* Sticky блок - замените на Id блока который должен прилипнуть */ #rec135372713 < position: sticky; position: -webkit-sticky; z-index: 999; top: 0px; >.t-records 

Блок фиксируется вверху экрана, когда до него доскроллит пользователь, и отлипает в нужном месте.

Фиксация сверху с отлипанием

1) Добавьте блок, который будет прилипать к верху экрана.
2) Добавьте код #2 в блок Т123 из категории «Другое»
3) Укажите в коде Id прилипающего блока и блока, после которого прилипание отключится. Id можно найти в самом низу настроек блока. Формат — #rec135372713.

  /* Sticky блок - замените на Id блока который должен прилипнуть */ #rec135372713 < position: sticky; position: -webkit-sticky; z-index: 999; top: 0px; >.t-records  

Блок будет зафиксирован в нижней части экрана с начала страницы и отлипнет в нужном месте.

Фиксация снизу с отлипанием

1) Добавьте блок, который будет фиксироваться внизу экрана. Расположите блок в месте, где должно произойти отлипание. Если блок должен быть зафиксирован до конца страницы, расположите его в самом низу.
2) Добавьте код #3 в блок Т123 из категории «Другое».
3) Укажите в коде Id блока, прилипающего к низу. Id можно найти в самом низу настроек блока. Формат — #rec135372713.

  /* Sticky блок - замените на Id блока который должен прилипнуть */ #rec135372713 < position: sticky; position: -webkit-sticky; z-index: 999; bottom: 0px; >.t-records 

Как сделать фиксированное меню в Zero Block?

Вы можете зафиксировать созданное меню с помощью настроек Zero Block.

Блок можно зафиксировать сверху или снизу страницы, а также настроить появление спустя Х пикселей (Appear Offset). В этом случае доступна настройка одного из двух вариантов анимации появления — Fade in или Slide up/down. Это может пригодиться, например, если вы хотите, чтобы шапка сайта появлялась не сразу, а через несколько скроллов.

Чтобы настроить фиксацию, перейдите к редактированию Zero Block → Settings → Position and Overflow.

Похожие вопросы
  • Как добавить стрелку в Zero Block?
  • Есть ли слои в Zero Block?
  • Как добавить направляющие линии в Zero Block?
  • Как в Zero Block настроить увеличение изображения по клику?
  • Что такое Tooltip (тултип) в Zero блоке?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *