Как сделать фиксированное меню – скрипт для нашего сайта…

Давайте по-быстренькому “загнём)” вопрос о том, как сделать на сайте фиксированное меню:

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

Функционал фиксированного меню замечательно настраивается: лучше не скажешь – как душе угодно настраивается! можно, например, обыграть как-то дополнительное меню фиксацией…

И да – непременно докладываю, что этот мой пост пишется в продолжение инструкции о том, как реализовать или зафиксировать не меню, но виджет в сайдбаре (ссылка на статью, ниже по тесту)

Что ж… занавес открывается… отфиксировывается, что ли))

Приступим и реализуем

как сделать на сайте фиксированное меню

В папке темы, которая зовётся коротко js создадим новый файл, скажем с именем:

fixsidy-sidy.js

В этот файл запишем скрипт (или код, кому как угодно) – вот эти строки:

$(function(){
$(window).scroll(function() {
    var top = $(document).scrollTop();
    if (top < 132) $(".menu-s-container").css({top: '0', position: 'relative'});
else $(".menu-s-container").css({top: '0', position: 'fixed'});
  });
  /* меню, если нужно отключить меню ФИКС - убираем отработку скрипта в футере! */
});

1. .menu-s-container – селектор div класса css. У вас может быть иной класс меню: замените в скрипте имя.
2. (top < 132) – отступ от верхнего края браузера, при котором меню фиксируется. Т.е. чтобы избежать скачкообразной прилипчивости меню, нужно регулировать этот параметр.

связка файла js фиксации меню в футере темы

Чтоб решить вопрос раз и навсегда: как сделать на сайте фиксированное меню – откроем для редактирования следующий файл:

…подвальный – в файл footer.php перед закрывающим тегом </body> вписываем такую строку: (это, как понимаете, привязка созданного js файла)

<script type='text/javascript' src='/wp-content/themes/имя_темы/js/fixsidy-sidy.js'>

как отключить сценарий работы скрипта фиксированного меню на маленьком расширении экрана

Чтобы фиксированное меню переставало работать на, скажем так, маленьком (расширении) экране телефона – замените в подвальном файле показанную выше строку, на эту:

<script> if (document.body.clientWidth>1025) {document.write("<script type='text/javascript' src='/wp-content/themes/имя_темы/js/fixsidy-sidy.js'><\/script>");}</script>

(document.body.clientWidth>1025) – ширина отключения прилипчивости скрипта фиксации меню.

Если назрели какие-то вопросы, задавайте в комментариях…

На этом занавес представления опускается…
…на рампы пыль печальная ложится…

Online консультация по настройкам и созданию сайтов на WordPress