Как сделать прилипающее при прокрутке главное меню и переместить в него персональное меню

Ко мне обратились с таким вопросом, как сделать фиксированное меню, в котором каким-то образом оказывается персональное меню, как у меня на сайте. Решил рассказать здесь. На самом деле всё относительно просто.

Шаг 1

Устанавливаем этот виджет и вставляем его в любую позицию на всех страницах.

Шаг 2

Если шаблон Modern или дочерний, то в разделе «Виджеты и страницы» в админке ту колонку, где виджет с персональным меню, меню уведомлений, меню авторизации и др. редактируем, выбираем «Свой шаблон», и вставляем там свою разметку:

<div class="ml-auto d-flex align-items-center headusermenu">
    {position}
</div>

Если шаблон другой, то значит в коде шаблона найдите тот блок, где эти виджеты и добавьте ему класс headusermenu.

Шаг 3

Во вкладке «Код перед </body>» установленного на шаге 1 виджета добавляем такой код:

<script>
    $(window).scroll(function(){
        var w = $(".mainmenu .container").outerWidth(); 
        var sw = $(window).width();
        var right = (sw - w) / 2;
        var h = $(".header").outerHeight();
        if ($(window).scrollTop() > h){
            $("body").addClass("sitescroll");
            $(".headusermenu").css("right", right + "px");
        } else {
            $("body").removeClass("sitescroll");
            $(".headusermenu").css("right", 'auto');
        }
    });
</script>

Разберем немного этот код. 

1. $(window).scroll(function(){...} — вызываем функцию при прокрутке страницы.

2. var w = $(".mainmenu .container").outerWidth(); — ширина главного меню. Укажите свой селектор, если он другой.

3. var sw = $(window).width(); — ширина окна браузера.

4. var right = (sw — w) / 2; — отнимаем от ширины окна браузера ширину меню и делим на 2. Потом будем это использовать для добавления стилей позиции с персональным меню.

5. var h = $(".header").outerHeight(); — высота шапки. Укажите свой селектор, если он другой. Нам нужно высчитать высоту всех элементов, которые перед меню. Если кроме шапки есть еще что-то, то добавьте еще такие же строки. Например var t = $(".topbar").outerHeight(); и т. п.

6. Дальше условие if ($(window).scrollTop() > h){...} — если прокрутили больше, чем высота шапки… Если в п. 5 вы добавили другие блоки, то вместо h напишите h + t и т. д. Если тело страницы имеет внутренний отступ сверху, то можно добавить количество пикселей сюда же так: h + t + 10.

Итак, если условие выполняется, то мы добавляем тегу body класс sitescroll, а позиции для виджета добавляем стили $(".headusermenu").css(«right», right + «px»);

Или возвращаем всё назад, если условие не выполнено.

Шаг 4

Теперь добавим стили для этого всего. В виджет из шага 1 во вкладке «Код в HEAD» добавляем такой код:

<style>
    .mainmenu{
        position:relative;
        z-index:15;
        transition:background ease-out .2s;
    }
    .headusermenu{
        position:relative;
        z-index:16;
    }
    .sitescroll .mainmenu{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        background:rgba(255,255,255,.3);
    }
    .sitescroll .headusermenu{
        position:fixed;
        top:3px;
        animation:usermenushow linear .2s 1;
    }
    @keyframes usermenushow {
        from{opacity:0;}
        to{opacity:1;}
    }
</style>

Добавьте еще стилей по вкусу.

Готово.