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

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

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

Изображение

Шаг 1

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

Шаг 2

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

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

Изображение

Изображение

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

Шаг 3

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

  1. <script>
  2. $(window).scroll(function(){
  3. var w = $(".mainmenu .container").outerWidth();
  4. var sw = $(window).width();
  5. var right = (sw - w) / 2;
  6. var h = $(".header").outerHeight();
  7. if ($(window).scrollTop() > h){
  8. $("body").addClass("sitescroll");
  9. $(".headusermenu").css("right", right + "px");
  10. } else {
  11. $("body").removeClass("sitescroll");
  12. $(".headusermenu").css("right", 'auto');
  13. }
  14. });
  15. </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» добавляем такой код:

  1. <style>
  2. .mainmenu{
  3. position:relative;
  4. z-index:15;
  5. transition:background ease-out .2s;
  6. }
  7. .headusermenu{
  8. position:relative;
  9. z-index:16;
  10. }
  11. .sitescroll .mainmenu{
  12. position:fixed;
  13. top:0;
  14. left:0;
  15. width:100%;
  16. background:rgba(255,255,255,.3);
  17. }
  18. .sitescroll .headusermenu{
  19. position:fixed;
  20. top:3px;
  21. animation:usermenushow linear .2s 1;
  22. }
  23. @keyframes usermenushow {
  24. from{opacity:0;}
  25. to{opacity:1;}
  26. }
  27. </style>

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

Готово.

0
kalikimaka kalikimaka 12 дней назад #

Спасибо за способ. НО!:) Сначала надо рассказать, как у вас сделано фиксированное меню, ибо из дефолтной сетки оно не делается. Т.е. для того чтобы меню фиксировалось через sticky-top, оно должно быть в отдельном ряду от ряда с логотипом.

0
Нифигаccе о-го-гошеньки Нифигаccе о-го-гошеньки 12 дней назад #

для того чтобы меню фиксировалось через sticky-top

А при чем здесь sticky-top? Я его не предлагал использовать. При скроллинге body получает класс sitescroll, а дальше стилями можно сделать вообще что угодно, хоть зафиксировать, хоть заставить прыгать. 

  1. .sitescroll .mainmenu{
  2. position:fixed;
  3. top:0;
  4. left:0;
  5. width:100%;
  6. background:rgba(255,255,255,.3);
  7. }
0
kalikimaka kalikimaka 12 дней назад #

именно, что вы с конца начали:) сначала, надо понимать, как сделано фиксированное меню, а потом, как туда падает другое меню.

0
Нифигаccе о-го-гошеньки Нифигаccе о-го-гошеньки 12 дней назад #

Да? Ну ладно.

0
Sergon Sergon 12 дней назад #

Да, тоже было бы интересно))

Еще от автора

Глобальное снижение цен на дополнения
Снизил цены на всё, а многое опять стало бесплатным.
Виджет "Супер-мега-меню"
Виджет позволяет добавить к пунктам стандартного меню появление при клике или наведении на них панелей с разными кнопками и списками контента.
Поле "UpJump - поднятие записей"
Поднятие авторами своих записей в списках типов контента и групп.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.