Фискированное меню в мобильной версии сайта

Популярный фреймворк Bootstrap 4 имеет простое встроенное решение для реализации фиксированного верхнего меню, надо всего лишь добавить класс «fixed-top» к нужному элементу, например к «nav». Но как быть, если хочется прилепить верхнее меню только в мобильной версии сайта? Тут на помощь приходит Java скрипт, использующий библиотеку jQuery которая так же поставляется в пакете с бутстрапом.

Добавляем к дефолтному Bootstrap 4 Navigation Bar элементу «nav» идентификатор «id="stick_menu"»

<nav id="stick_menu" class="navbar navbar-expand-md bg-dark navbar-dark">
    <!-- Toggler/collapsibe Button -->
    <button data-target="#navbar" class="navbar-toggler" type="button" data-toggle="collapse">
    <span class="navbar-toggler-icon"></span>
    </button>
    <!-- Navbar links -->
    <div id="navbar" class="collapse navbar-collapse">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div> 
</nav>

и подключаем к странице скрипт:

(function(window, $){
    var $window = $(window),
        isWindowLoad = false;
    $window.on('load', function(){
        isWindowLoad = true;
    });
    function log(){
        console.log.apply(console, arguments);
    }
    $(document).ready(function(){
        function initMenu(){
            var $hNav = $('#stick_menu'); /*ID фиксируемого элемента*/
            function checkScroll(e, init){
                init = init || false;
                if ($window.scrollTop() > 120) { /*Высота срабатывания*/
                    if ($('#navbar').is(':hidden')) { /*Триггер переключения*/
                    $hNav.addClass('fixed-top');}
                } else {
                    $hNav.removeClass('fixed-top');
                }
            }
            checkScroll(null, true);
            $window.on('scroll.checkScroll', checkScroll);
        }
       initMenu();
    });
}(window, window.jQuery));

Скрипт отработает только когда верхнее меню изменится с десктопного на планшетный\мобильный вид, высота прокрутки на которой включится триггер задаётся в пикселях, замерить нужную высоту можно с помощью расширения Page Ruler для Google Chrome или аналогов. Триггером переключения является имя связки «button data-target» блока Toggler/collapsibe Button и «div id» блока Navbar links из примера выше. Если вы используете отличное от по-умолчанию имя, не забудьте поменять его и в коде скрипта.

Идентификатор «id="stick_menu"» не обязательно прикручивать к «nav», можно к любому контейнеру, который содержит меню и который требуется зафиксировать при прокрутке, например:

<div class="container-fluid" id="stick_menu">
    <div class="row">
        <nav class="navbar navbar-expand-lg bg-dark navbar-light">
...
        </nav>
    </div>
</div>

Ну и, разумеется, ID можно заменить на свой, не забыв поменять его и в коде java-скрипта.

Важно:

Скрипт должен идти ПОСЛЕ вызова jQuery

Дополнение

Можно использовать упрощённую версию скрипта, так же отлично работает:

$(window).scroll(function () {
    var scroll = $(window).scrollTop();

    if (scroll >= 250) { /*Высота срабатывания*/
        if ($('#navbar').is(':hidden')){ /*Работает только на бутстрап-триггер XS*/
        $("#stick_menu").addClass("fixed-top");}
    }
    else {
        $("#stick_menu").removeClass("fixed-top");
    }
});