Как сделать так, чтобы ваша навигация Divi начиналась снизу, а затем оставалась фиксированной вверху при прокрутке

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

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

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

Раздел героя: модуль заголовка полной ширины с полноэкранным режимом

Когда вы собираетесь использовать этот эффект на своем веб-сайте, нужно учитывать одну вещь; вам нужен модуль заголовка полноэкранного режима. Теоретически вы можете применить это и к другим модулям и разделам, но вам придется внести некоторые изменения, чтобы меню отображалось внизу этого раздела. Полноэкранный вариант, предлагаемый Divi, гарантирует, что раздел героя заполняет экран (независимо от размера экрана), поэтому мы рекомендуем использовать его, если вы хотите применить этот эффект к своему меню.

Начните с открытия или создания страницы, на которой вы хотите добавить этот эффект. Затем откройте заголовок Fullwidth или создайте его и перейдите на вкладку «Дизайн». Первое, с чем вы столкнетесь на вкладке дизайна, - это подкатегория Layout. Идите вперед и включите полноэкранный режим в этой подкатегории.

Создание фиксированной навигации при прокрутке

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

Добавьте требуемый код CSS

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

Добавить код CSS с помощью настройщика тем

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

Чтобы добавить код CSS, откройте панель управления WordPress> выберите Внешний вид> Настройка> Прокрутите вкладку вниз и откройте вкладку Дополнительные CSS> Добавьте следующие строки кода CSS:

#main-header {
position: absolute;
top: auto;
bottom: 0;
}

Добавить код CSS с помощью параметров темы

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

Чтобы добавить код в параметры вашей темы; перейдите в панель управления WordPress> Divi> Параметры темы> Прокрутите вкладку Общие и вставьте следующий код в поле Custom CSS:

#main-header { 
position: absolute; 
top: auto; 
bottom: 0; 
}

Добавить код CSS только на одну страницу

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

Откройте страницу, на которой вы хотите добавить фиксированную навигацию при прокрутке. Затем вы увидите следующий символ в правом углу конструктора:

Нажмите на нее, и вы увидите экран, на котором вы можете изменить всю страницу. Добавьте следующий код в поле Custom CSS, чтобы применить его, в частности, к этой странице:

#main-header { 
position: absolute; 
top: auto; 
bottom: 0; 
}

Добавьте требуемый код jQuery

Следующим шагом, который мы хотим сделать, будет добавление кода jQuery на наш сайт WordPress. Этот код начнет работать с момента прокрутки. Мы можем добавить код jQuery двумя способами; через параметры темы или через модуль кода. Если вы хотите добавить код только на одну страницу, вы можете использовать модуль кода в сочетании с третьей возможностью, которую мы упомянули для кода CSS в этом посте.

Добавить код jQuery через параметры темы

Чтобы применить код ко всем страницам вашего веб-сайта, вы можете добавить код в Параметры темы. Перейдите в панель управления WordPress> перейдите в Divi> перейдите к параметрам темы> откройте вкладку интеграции> и вставьте следующий код в поле «<head> вашего блога»:

<script text="text/javascript">
jQuery(function($){
$(window).bind('scroll', function() {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight) {
$("#main-header").css("position","absolute").css("top","auto").css("bottom",0);
}
else {
$("#main-header").css("position","fixed").css("bottom","auto").css("top",0);
}
});
});
</script>

Добавить код jQuery через модуль кода

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

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

<script text="text/javascript">
jQuery(function($){
$(window).bind('scroll', function() {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight) {
$("#main-header").css("position","absolute").css("top","auto").css("bottom",0);
}
else {
$("#main-header").css("position","fixed").css("bottom","auto").css("top",0);
}
});
});
</script>

Вот и все! Теперь код должен работать, преобразовать ваше меню и сделать ваш сайт более интерактивным.

Последние мысли

В этом посте мы показали вам, как создать фиксированную навигацию при прокрутке. Мы предоставили вам несколько строк кода CSS и несколько строк кода jQuery, которые должны помочь. Если вы следили за этим постом шаг за шагом, вы сможете получить окончательный результат. Если у вас есть какие-либо вопросы или предложения по предстоящим публикациям; не стесняйтесь оставлять комментарии в разделе комментариев ниже!

Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!

Изображение от DenisXize / shutterstock.com