Скрыть навигацию при прокрутке вниз и показывать при прокрутке вверх только в мобильном телефоне

Question

Я пытаюсь скрыть навигацию при прокрутке вниз и показывать при прокрутке вверх только в мобильном режиме. У меня есть пример, который я нашел на другом сайте, который использует скрипт, который делает то же самое, только я не очень хорошо разбираюсь и приспосабливаю его к моей ситуации. Вы видите, что это работает, когда размер браузера невелик.

-> Пример сайта

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

-> Скрипка

<header>
<nav>
    <div class="mobile-nav">
        <div class="nav-toggle"><i class="nav-icon"></i></div>
    </div>
    <ul class="left-nav">   
        <li class="home"><a href="#">Pixelation</a></li>    
    </ul>
    <ul class="right-nav">  
        <li><a href="#">Work</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
</header>

Часть сценария примера сайта

   hideShowMobileNav = function(setOldScroll) {
    if (stateMap.scrollTop != stateMap.oldScrollTop && stateMap.scrollTop > 100) {
        if (stateMap.scrollTop > stateMap.oldScrollTop) {
            jqueryMap.$nav.addClass('hidden');
        } else {
            jqueryMap.$nav.removeClass('hidden');
        }
    }
    if (setOldScroll) {
        stateMap.oldScrollTop = stateMap.scrollTop;
    }
};

Answer 1

Вы можете использовать обнаружение устройства

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
    // Do something
} else {
    // Do something else
}

или же width() функция

или какой-то медиа-запрос CSS