Выберите, как будет вести себя хедер при прокрутке страницы. Закрепите его, чтобы навигация всегда оставалась доступной, или настройте его исчезновение либо затухание, чтобы освободить весь экран для контента. Затем задайте направление, расстояние и длительность эффекта.
Добавление и настройка эффекта прокрутки хедера
Настройте поведение хедера в соответствии со страницей. Закрепите его, если посетителям нужен постоянный доступ к меню, или уберите с экрана, если основное внимание должно быть сосредоточено на контенте.
Чтобы добавить эффект прокрутки к хедеру:
Перейдите в редактор.
Нажмите на хедер.
Нажмите Изменить поведение на панели действий.
Выберите Эффект прокрутки.
Нажмите Все параметры дизайна , чтобы настроить эффект на панели «Инспектор».
На панели «Инспектор» нажмите Настройки хедера, чтобы развернуть секцию.
Настройте выбранный эффект прокрутки:
Прокрутка вместе с сайтом
Хедер прокручивается вместе с остальной частью страницы. Это поведение по умолчанию, для него нет дополнительных настроек.
Хедер исчезает из поля зрения, когда посетители прокручивают страницу вниз.
Перекрытие: выберите, должен ли хедер перекрывать секцию под ним.
Нет: хедер занимает собственное пространство в верхней части страницы. Задайте Смещение сверху (%), чтобы добавить расстояние между хедером и верхней частью страницы.
Следующая секция: хедер перекрывает следующую секцию при прокрутке страницы. Чтобы вместо этого переместить хедер в нижнюю часть экрана, активируйте переключатель Разместить внизу экрана.
Цвет при прокрутке: активируйте переключатель, чтобы изменить цвет фона хедера при прокрутке страницы, затем выберите цвет и настройте его прозрачность.
Направление: выберите, в каком направлении хедер будет уходить за пределы экрана.
Расстояние: задайте, насколько хедер будет смещаться. При значении 100% он полностью исчезнет с экрана.
Задержка (сек.): задайте время ожидания перед запуском эффекта.
Длительность (сек.): задайте длительность эффекта.
Сглаживание: выберите, как анимация будет ускоряться и замедляться, например «Линейное (нет)», «Синусоидальное ускорение» или «Кубическое замедление».
Хедер остается на месте при прокрутке страницы и всегда виден.
Перекрытие: выберите, должен ли хедер перекрывать секцию под ним.
Нет: хедер занимает собственное пространство в верхней части страницы. Задайте Смещение сверху (%), чтобы добавить расстояние между хедером и верхней частью страницы.
Следующая секция: хедер перекрывает следующую секцию при прокрутке страницы. Чтобы вместо этого переместить хедер в нижнюю часть экрана, активируйте переключатель Разместить внизу экрана.
Цвет при прокрутке: активируйте переключатель, чтобы изменить цвет фона хедера при прокрутке страницы, затем выберите цвет и настройте его прозрачность.
Хедер постепенно исчезает из поля зрения, когда посетители прокручивают страницу вниз.
Перекрытие: выберите, должен ли хедер перекрывать секцию под ним.
Нет: хедер занимает собственное пространство в верхней части страницы. Задайте Смещение сверху (%), чтобы добавить расстояние между хедером и верхней частью страницы.
Следующая секция: хедер перекрывает следующую секцию при прокрутке страницы. Чтобы вместо этого переместить хедер в нижнюю часть экрана, активируйте переключатель Разместить внизу экрана.
Цвет при прокрутке: активируйте переключатель, чтобы изменить цвет фона хедера при прокрутке страницы, затем выберите цвет и настройте его прозрачность.
Задержка (сек.): задайте время ожидания перед запуском эффекта.
Длительность (сек.): задайте длительность эффекта.
Удаление эффекта прокрутки
Удалите эффект, чтобы хедер снова перемещался вместе со страницей. Дизайн хедера сохранится — изменится только его поведение при прокрутке.
Чтобы удалить эффект прокрутки:
- Перейдите в редактор.
- Нажмите на хедер.
- Нажмите Изменить поведение на панели действий.
- Выберите Прокручивать вместе с сайтом в раскрывающемся списке Эффект прокрутки.
Настройте поведение хедера самостоятельно. Включите дополнительные настройки, чтобы независимо настраивать расположение и движение хедера. Например, вы сможете закрепить хедер в нижней части экрана или задать собственные параметры времени и сглаживания.
Чтобы настроить дополнительные параметры хедера:
Перейдите в редактор.
Нажмите на хедер.
Нажмите Изменить поведение на панели действий.
Нажмите Все параметры дизайна.
Нажмите значок Дополнительные действия 
в верхней части панели «Инспектор» и включите переключатель Дополнительные настройки.
Нажмите Настройки хедера, чтобы развернуть секцию.
Выберите тип расположения:
По умолчанию: у хедера нет фиксированного положения, и он прокручивается вместе с остальной частью страницы.
Закрепление при прокрутке: хедер закрепляется у края экрана, когда посетители прокручивают страницу.
Фиксированное положение: хедер фиксируется на экране поверх содержимого страницы.
Настройте выбранный тип расположения:
Выберите, нужно ли добавлять в хедер следующие элементы:
Цвет при прокрутке: активируйте переключатель, чтобы изменить цвет фона хедера при прокрутке страницы посетителями, затем выберите цвет и настройте его прозрачность.
Переход: активируйте переключатель, чтобы добавить анимацию, которую посетители увидят при прокрутке обратно вверх к хедеру.
Выберите Перемещение или Затухание.
Настройте анимацию:
Направление: выберите, куда будет перемещаться хедер.
Расстояние: задайте расстояние перемещения хедера (%).
Сглаживание: выберите, как анимация ускоряется и замедляется, например «Линейное (нет)», «Синусоидальное в начале» или «Кубическое в конце».
Задержка (сек.) и Длительность (сек.): настройте время анимации.
Примечание:
Доступные настройки зависят от выбранного перехода: Перемещение или Затухание.
Привязать к: выберите край, к которому будет привязан хедер: Сверху, Снизу или Снизу и сверху.
Смещение: задайте расстояние (%) между хедером и выбранным краем.
Оставить на переднем плане: установите чекбокс, чтобы хедер отображался поверх остального контента страницы.
Цвет при прокрутке: активируйте переключатель, чтобы изменить цвет фона хедера при прокрутке страницы посетителями, затем выберите цвет и настройте его прозрачность.
Переход: активируйте переключатель, чтобы добавить эффект при прокрутке вверх и вниз.
Выберите Перемещение или Затухание.
Настройте анимацию:
Направление: выберите, куда будет перемещаться хедер.
Расстояние: задайте расстояние перемещения хедера (%).
Сглаживание: выберите, как анимация ускоряется и замедляется, например «Линейное (нет)», «Синусоидальное в начале» или «Кубическое в конце».
Задержка (сек.) и Длительность (сек.): настройте время анимации.
Примечание:
Доступные настройки зависят от выбранного перехода: Перемещение или Затухание.
Разместить внизу экрана: активируйте переключатель, чтобы зафиксировать хедер в нижней, а не в верхней части экрана.
Цвет при прокрутке: активируйте переключатель, чтобы изменить цвет фона хедера при прокрутке страницы посетителями, затем выберите цвет и настройте его прозрачность.
Переход: активируйте переключатель, чтобы добавить эффект при прокрутке вверх и вниз.
Выберите Перемещение или Затухание.
Настройте анимацию:
Направление: выберите, куда будет перемещаться хедер.
Расстояние: задайте расстояние перемещения хедера (%).
Сглаживание: выберите, как анимация ускоряется и замедляется, например «Линейное (нет)», «Синусоидальное в начале» или «Кубическое в конце».
Задержка (сек.) и Длительность (сек.): настройте время анимации.
Примечания:
Часто задаваемые вопросы
Нажмите на вопрос ниже, чтобы подробнее узнать об эффектах прокрутки хедера.
Почему раскрывающийся список «Эффект прокрутки» больше не отображается?
Этот параметр доступен, когда дополнительные настройки отключены. Если он не отображается, возможно, вы включили дополнительные настройки для хедера.
Нажмите Option + I или Alt + I, чтобы вернуться к предыдущему режиму.
Чем эффект прокрутки отличается от анимаций на вкладке «Движение»?
Эффект прокрутки определяет поведение самого хедера при прокрутке страницы. Настроить его можно в разделе Настройки хедера на панели «Инспектор».
Вкладка Движение на панели «Инспектор» добавляет еще один уровень движения хедера. Например, можно применить анимацию при наведении или нажатии, чтобы хедер привлекал внимание посетителей.
