Hide nav on scroll down and show on scroll up only when in mobile

Question

I trying to hide my nav on scroll down and show on scroll up only when in mobile mode. I have a example that i found from another website that uses a script that does the same only i'm not really good in unraveling and adjusting it to my situation. You see it working when the browser size is small.

--> Example website

I have a navigation that has two versions: one inline when in large screen size and position is absolute and the second in mobile screen size with a hamburger icon the open the menu items under each other.

--> Fiddle

<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>

Part of the script of example website

   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

You could use device detection

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

or width() function

or some sort of css media query