Мануал Динамическое меню навигации | 4.1.x

[#Rips]

Автор:Ciko

В результате мы получим вот такое динамическое меню:

Спойлер: Screen(gif)

Для того, чтобы закрепить навигационное меню при прокрутке страницы, переходим по пути:
АЦ -> Внешний вид -> Стиль -> Стили и шаблоны -> Выбираем свой стиль(в данном случае это стандартный стиль Default) и нажимаем кнопку "Изменить HTML и CSS"
Далее открываем кладку ШАБЛОНЫ и идём по пути(должно открыться сразу):
Core -> Front -> Global -> GlobalTemplate
Ищем строку:

{template="includeJS" if="theme.js_include == 'footer'" app="core" group="global" location="global" params=""}

И сразу после неё вставляем скрипт:

<script>
            $('#elSearchNavContainer').addClass('original').clone().insertAfter('#elSearchNavContainer').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','2000').removeClass('original').hide();
            $('.cloned #elSearch').remove();
   
            $(document).ready(function() {
                var stickyNavTop = $('#elSearchNavContainer').offset().top;
   
                window.addEventListener("resize", clone);
                function clone() {
                    var test = document.getElementById('elSearchNavContainer').offsetWidth;
                    $('.cloned').css('width',test);
                }
   
                var stickyNav = function(){
                    var scrollTop = $(window).scrollTop();
   
                    if (scrollTop > stickyNavTop) {
                        $('.cloned').css('display', 'inline');
                        $('.original').css('visibility', 'hidden');
                        $('.original #elSearch').appendTo('.cloned');
                    } else {
                        $('.cloned').css('display', 'none');
                        $('.original').css('visibility', 'visible');
                        $('.cloned #elSearch').appendTo('.original');
                    }
                };

                stickyNav(); clone();
     
                $(window).scroll(function() {
                    stickyNav();
                });
            });
        </script>